Tab Title

Child component of Tabs

API reference

Properties

PropertyAttributeDescriptionTypeDefault
closableclosableWhen true, a close button is added to the component.booleanfalse
closedclosedWhen true, does not display or position the component.booleanfalse
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
iconEndicon-endSpecifies an icon to display at the end of the component.string
iconFlipRtlicon-flip-rtlDisplays the iconStart and/or iconEnd as flipped when the element direction is right-to-left ("rtl")."both" | "end" | "start"
iconStarticon-startSpecifies an icon to display at the start of the component.string
messageOverridesUse this property to override individual strings used by the component.{ close?: string; }
positionpositionSpecifies 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"
selectedselectedWhen true, the component and its respective calcite-tab contents are selected. Only one tab can be selected within the calcite-tabs parent.booleanfalse
tabtabSpecifies a unique name for the component. When specified, use the same value on the calcite-tab.string

Slots

NameDescription
default (unnamed)A slot for adding text.

Styles

NameDescription
--calcite-tab-icon-color-endSpecifies the component's iconEnd color. Fallback to --calcite-icon-color.
--calcite-tab-icon-color-startSpecifies the component's iconStart color. Fallback to --calcite-icon-color.

Events

NameDescriptionBehavior
calciteTabsActivateFires when a calcite-tab is selected.bubblescomposed
calciteTabsCloseFires when a calcite-tab is closed.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
getTabIndexReturns the index of the title within the calcite-tab-nav.getTabIndex(): Promise<number>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close