Tab
<sl-tab> | SlTab
Tabs are used inside tab groups to represent and activate tab panels.
Additional demonstrations can be found in the tab group examples.
Slots
| Name | Description |
|---|---|
| (default) | The tab’s label. |
Learn more about using slots.
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
panel
|
The name of the tab panel this tab is associated with. The panel must be located in the same tab group. |
|
string
|
''
|
active
|
Draws the tab in an active state. |
|
boolean
|
false
|
closable
|
Makes the tab closable and shows a close button. |
|
boolean
|
false
|
disabled
|
Disables the tab and prevents selection. |
|
boolean
|
false
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Events
| Name | React Event | Description | Event Detail |
|---|---|---|---|
sl-close |
|
Emitted when the tab is closable and the close button is activated. | - |
Learn more about events.
Parts
| Name | Description |
|---|---|
base |
The component’s base wrapper. |
close-button |
The close button, an <sl-icon-button>. |
close-button__base |
The close button’s exported base part. |
Learn more about customizing CSS parts.
Dependencies
This component automatically imports the following dependencies.
<sl-icon><sl-icon-button>