Tab Panel
<quiet-tab-panel>
Tab panels hold the content that gets displayed when a tab is selected.
This component must only be used within a tab list. You can see some examples of tab panels 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-panel> from the CDN, use the following code.
import 'https://cdn.jsdelivr.net/npm/@quietui/quiet@1.0.0/dist/components/tab-panel/tab-panel.js';
To manually import <quiet-tab-panel> from npm, use the following code.
import '@quietui/quiet/dist/components/tab-panel/tab-panel.js';
Slots Jump to heading
Tab Panel supports the following slots. Learn more about using slots
| Name | Description |
|---|---|
| (default) | Content to show inside the tab panel. |
Properties Jump to heading
Tab Panel 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 |
|---|---|---|---|---|
name
|
The name of the tab panel. Used for assigning tabs to panels. |
|
string
|
Custom States Jump to heading
Tab Panel 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 |
|---|---|---|
visible |
Applied when the tab panel is visible. |
:state(visible)
|