ns-tab

Atom | Tab component.

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-tabs as a slot of tab.

Usage

To see examples visit Storybook.

<ns-tab>Electricity</ns-tab>

Component relationship

Relationship

Does it live in a panel?

❌ No

Does it live inside other components?

✅ Yes - ns-tabs

What layout classes can be used?

None

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.

💩 🎉 🦄 You can also contact the team on Slack on the #product-nucleus channel!