ns-tab
Introduction#
The singular tab that dictates what the area is about.
The tab is the button that can be clicked to change the content in the ns-tabs. It shows the user what content there is with a heading and an optional icon.
Content guidance#
Please see ns-tabs for full content guidance.
Best practice#
| 💚 Do's | 💔 Don'ts |
|---|---|
| Always add heading text | Add an icon to one tab and not to the other tabs |
| Add more than 2 words to the heading | |
| Add different types of icons (solid, outline, functional) |
Considerations of best practice#
- Only use inside
ns-tabsas a slot oftab.
Usage#
Component placement#
The ns-tab component can only be used in the ns-tabs component.
Specification#
| Attribute | Type | Default | Options | Description |
|---|---|---|---|---|
icon | string | Please see the documentation for ns-icon | Optional icon to add to the tab. | |
selected | boolean | false | true, false | Pre-selected tab |
| Event | Description |
|---|---|
tabselected | Sends a event when tab is selected. |
| Slots | Type |
|---|---|
anonymous | textNode |
Feedback#
- Do you have insights or concerns to share? You can raise an issue via Github bugs.
- See all the issues already raised via Github issues.
💩 🎉 🦄 If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.