Frame
<ns-frame> Overview
Frame provides page navigation layout specific to a particular context eg.. User account.
✨ This is an auto-generated AI summary of the ns-frame's documentation.
It may not be accurate. ✨
Examples
Guidance
Implementation
Placement
The ns-frame component can only be used as a child of the <main> element.
Specification
Attributes
active-button
- Property
activeButton- Description
- The optional button index that needs to be selected by default.
- Type
number- Default
undefined
name
- Property
name- Description
- The account holder name that needs to be displayed.
- Type
string- Default
undefined
show-search
- Property
showSearch- Description
- The toggle to show search option in the header.
- Type
boolean- Default
false
hide-buttons
- Property
hideButtons- Description
- The toggle to hide the navigational buttons.
- Type
boolean- Default
false
hide-menu
- Property
hideMenu- Description
- The toggle to hide the menu in the header.
- Type
boolean- Default
false
ignore-prefix-path
- Property
ignorePrefixPath- Description
- The path pattern to be ignored from the window location to match the button navigation link.
- Type
string- Default
buttons
- Property
buttons- Description
- The list of button objects. Each button has navigation link.
- Type
Array- Default
[]
menu
- Property
menu- Description
- The list of menu items that needs to be displayed in the navigation header.
- Type
Array- Default
[]
type
- Property
type- Type
string- Default
standard
Slots
| Slot | Permitted tags | Description |
|---|---|---|
| Anonymous slot | The anonymous slot for the content that needs to be displayed. |
Events
| Name | Description |
|---|---|
search-click | Dispatched when the search option is clicked. |
menu-click | Dispatched when the menu item is clicked. It holds the menu details. |
logout-click | Dispatched when the logout CTA is clicked from the account menu. |
button-click | Dispatched when the navigational button is clicked. It holds the button details. |
Last updated: