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: