API reference
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| closable | closable | When true, displays a close button in the component. | boolean | false |
| closed | closed | When true, hides the component. | boolean | false |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | false |
| iconEnd | icon-end | Specifies an icon to display at the end of the component. | IconName | |
| iconFlipRtl | icon-flip-rtl | Displays the iconStart and/or iconEnd as flipped when the element direction is right-to-left ("rtl"). | FlipContext | |
| iconStart | icon-start | Specifies an icon to display at the start of the component. | IconName | |
| messageOverrides | Overrides individual strings used by the component. | Record<string, unknown> | undefined | ||
| position | position | Specifies the position of calcite-tab-nav and calcite-tab-title components in relation to, and is inherited from the parent calcite-tabs, defaults to top.
@internal | TabPosition | "top" |
| selected | selected | When true, the component and its respective calcite-tab contents are selected.
Only one tab can be selected within the calcite-tabs parent. | boolean | false |
| tab | tab | Specifies a unique name for the component.
When specified, use the same value on the calcite-tab. | string |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding text. |
Styles
| Name | Description |
|---|---|
| --calcite-tab-text-color | Specifies the component's text color. |
| --calcite-tab-text-color-press | Specifies the component's text color when hovered, pressed, or selected. |
| --calcite-tab-border-color | Specifies the component's border color. |
| --calcite-tab-background-color | Specifies the component's background color. |
| --calcite-tab-background-color-hover | When calcite-tabs is bordered, specifies the component's background color when hovered. |
| --calcite-tab-accent-color-press | When selected or active, specifies the component's accent color. |
| --calcite-tab-icon-color-start | Specifies the component's iconStart color. |
| --calcite-tab-icon-color-start-press | When selected, hovered, or pressed, specifies the component's iconStart color. |
| --calcite-tab-icon-color-end | Specifies the component's iconEnd color. |
| --calcite-tab-icon-color-end-press | When selected, hovered, or pressed, specifies the component's iconEnd color. |
| --calcite-tab-close-icon-color | Specifies the component's close element icon color. |
| --calcite-tab-close-icon-color-press | Specifies the component's close element icon color when hovered, focused, and active. |
| --calcite-tab-close-icon-background-color | Specifies the component's close element icon background color. |
| --calcite-tab-close-icon-background-color-press | Specifies the component's close element icon background color when pressed. |
| --calcite-tab-close-icon-background-color-hover | Specifies the component's close element icon background color when hovered. |
Events
| Name | Description | Behavior |
|---|---|---|
| calciteTabsActivate | Fires when a calcite-tab is selected. | |
| calciteTabsClose | Fires when a calcite-tab is closed. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<this> |
| getTabIndex | Returns the index of the title within the calcite-tab-nav. | getTabIndex(): Promise<number> |