Tab
<quiet-tab>
Tabs describe and select a tab panel within a tab list.
This component must only be used within a tab list. You can see some examples of tabs being used in the tab list documentation.
API Jump to heading
Importing Jump to heading
The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.
To manually import <quiet-tab> from the CDN, use the following code.
import 'https://cdn.jsdelivr.net/npm/@quietui/quiet@1.0.0/dist/components/tab/tab.js';
To manually import <quiet-tab> from npm, use the following code.
import '@quietui/quiet/dist/components/tab/tab.js';
Slots Jump to heading
Tab supports the following slots. Learn more about using slots
| Name | Description |
|---|---|
| (default) | The tab's content. This is usually a short label, but sometimes includes an icon. |
Properties Jump to heading
Tab has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties
| Property / Attribute | Description | Reflects | Type | Default |
|---|---|---|---|---|
panel
|
The name of the tab panel this tab will link to. The tab panel must be an HTML element inside the
<quiet-tab-list> element with a name attribute.
|
|
string
|
|
disabled
|
Disables the tab, preventing it from being activated. |
|
boolean
|
false
|
Custom States Jump to heading
Tab has the following custom states. You can target them with CSS using the selectors shown below. Learn more about custom states
| Name | Description | CSS selector |
|---|---|---|
active |
Applied when the tab is selected. |
:state(active)
|
disabled |
Applied when the tab is selected. |
:state(disabled)
|