API reference
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
closable | closable | When true , a close button is added to the component. | boolean | false |
closed | closed | When true , does not display or position 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. | string | |
iconFlipRtl | icon-flip-rtl | Displays the iconStart and/or iconEnd as flipped when the element direction is right-to-left ("rtl" ). | "both" | "end" | "start" | |
iconStart | icon-start | Specifies an icon to display at the start of the component. | string | |
messageOverrides | Use this property to override individual strings used by the component. | { close?: string; } | ||
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 | "bottom" | "top" | "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-icon-color-end | Specifies the component's iconEnd color. Fallback to --calcite-icon-color . |
--calcite-tab-icon-color-start | Specifies the component's iconStart color. Fallback to --calcite-icon-color . |
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<void> |
getTabIndex | Returns the index of the title within the calcite-tab-nav . | getTabIndex(): Promise<number> |