Tab Title

Overview

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

API reference

calcite-tab-title
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
activeactive

Show this tab title as selected

booleanA boolean property should be present, or not
truefalse
disableddisabled

Disable this tab title

booleanA boolean property should be present, or not
truefalse
iconEndicon-end

optionally pass an icon to display at the end of a tab title - accepts calcite ui icon names

optional
iconAccepts a Calcite UI Icon string
iconFlipRtlicon-flip-rtl

flip the icon(s) in rtl

optional
typedChoose from a set of typed values
bothendstart
iconStarticon-start

optionally pass an icon to display at the start of a tab title - accepts calcite ui icon names

optional
iconAccepts a Calcite UI Icon string
tabtab

Optionally include a unique name for the tab title, be sure to also set this name on the associated tab.

optional
stringA custom string
undefined

Events

NameDescriptionDetail
calciteTabsActivate

Fires when a specific tab is activated. Emits the "tab" property or the index position.

bubblescomposedcancelable
TabChangeEventDetailView documentation

Methods

NameDescriptionSignatureReturns
getTabIndex

Return the index of this title within the nav

getTabIndex() => Promise<number>Promise<number>

Slots

NameDescription
default (unnamed)

A slot for adding text.

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