Tabs

TkTabs component description.

React
Vue
Angular

import { TkTabs, TkTabsItem } from '@takeoff-ui/react'

import { TkTabs, TkTabsItem } from '@takeoff-ui/vue'

import { TkTabs, TkTabsItem } from '@takeoff-ui/angular'

Type

Establishes various tab styles basic, divided, compact, expanded available via the type property.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas! 1

View Code

React
Vue
Angular

Variants

Provides 3 different variant primary, info, neutral via variant property.

View Code

React
Vue
Angular

Spread Headers

Determines whether the tab headers will spread evenly across the horizontal space.

View Code

React
Vue
Angular

Align Headers

Tabs headers can aligned as start, center or end via align-headers property.

View Code

React
Vue
Angular

Sizes

Provides 3 different sizes small, base, large available via size property.

View Code

React
Vue
Angular

Orientation

Provides both horizontal and vertical orientations via orientation property.

View Code

React
Vue
Angular

Programmatic Control

Tabs can be controlled programmatically using the activeIndex prop.

View Code

React
Vue
Angular

<TkButton label="First Tab" onClick={() => setActiveTabIndex(0)} />
<TkButton label="Second Tab" onClick={() => setActiveTabIndex(1)} />
<TkButton label="Third Tab" onClick={() => setActiveTabIndex(2)} />
...
<TkTabs activeIndex={activeTabIndex} onTkTabChange={(e) => setActiveTabIndex(e.detail)}>
    <TkTabsItem label="First Tab" icon="flight">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
    </TkTabsItem>
    <TkTabsItem label="Second Tab" icon="flight">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
    </TkTabsItem>
    <TkTabsItem label="Third Tab" icon="flight">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
    </TkTabsItem>
</TkTabs>

<TkButton label="First Tab" @click="activeTabIndex = 0" />
<TkButton label="Second Tab" @click="activeTabIndex = 1" />
<TkButton label="Third Tab" @click="activeTabIndex = 2" />
...
<TkTabs :activeIndex="activeTabIndex" @tk-tab-change="(e) => activeTabIndex = e.detail">
    <TkTabsItem label="First Tab" icon="flight">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
    </TkTabsItem>
    <TkTabsItem label="Second Tab" icon="flight">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
    </TkTabsItem>
    <TkTabsItem label="Third Tab" icon="flight">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
    </TkTabsItem>
</TkTabs>

Controlled

Tabs can be controlled via the controlled property.

View Code

React
Vue
Angular

const [activeTab, setActiveTab] = useState(0);

<TkTabs
  activeIndex={activeTab}
  controlled
  onTkTabClick={(e) => setActiveTab(e.detail)}
>
  <TkTabsItem label="Tab label" icon="flight">
    <p className="m-0">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore
      sed consequuntur error repudiandae numquam deserunt quisquam
      repellat libero asperiores earum nam nobis, culpa ratione quam
      perferendis esse, cupiditate nequequas! 1
    </p>
  </TkTabsItem>
  <TkTabsItem label="Tab label" icon="flight">
    <p className="m-0">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore
      sed consequuntur error repudiandae numquam deserunt quisquam
      repellat libero asperiores earum nam nobis, culpa ratione quam
      perferendis esse, cupiditate nequequas! 2
    </p>
  </TkTabsItem>
  <TkTabsItem label="Tab label" icon="flight">
    <p className="m-0">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore
      sed consequuntur error repudiandae numquam deserunt quisquam
      repellat libero asperiores earum nam nobis, culpa ratione quam
      perferendis esse, cupiditate nequequas! 3
    </p>
  </TkTabsItem>
</TkTabs> 

const activeTab = ref(0);

<TkTabs
  activeIndex={activeTab}
  controlled
  onTkTabClick={(e) => activeTab = e.detail}
>
  <TkTabsItem label="Tab label" icon="flight">
    <p className="m-0">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore
      sed consequuntur error repudiandae numquam deserunt quisquam
      repellat libero asperiores earum nam nobis, culpa ratione quam
      perferendis esse, cupiditate nequequas! 1
    </p>
  </TkTabsItem>
  <TkTabsItem label="Tab label" icon="flight">
    <p className="m-0">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore
      sed consequuntur error repudiandae numquam deserunt quisquam
      repellat libero asperiores earum nam nobis, culpa ratione quam
      perferendis esse, cupiditate nequequas! 2
    </p>
  </TkTabsItem>
  <TkTabsItem label="Tab label" icon="flight">
    <p className="m-0">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore
      sed consequuntur error repudiandae numquam deserunt quisquam
      repellat libero asperiores earum nam nobis, culpa ratione quam
      perferendis esse, cupiditate nequequas! 3
    </p>
  </TkTabsItem>
</TkTabs>

Closable

Tabs can be closed separately via is-closable property.

View Code

React
Vue
Angular

<TkTabs isClosable>
  <TkTabsItem label="Tab label" icon="flight">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
  </TkTabsItem>
  <TkTabsItem label="Tab label" icon="flight">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
  </TkTabsItem>
  <TkTabsItem label="Tab label" icon="flight">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
  </TkTabsItem>
</TkTabs>

<TkTabs :isClosable.prop="true">
  <TkTabsItem label="Tab label" icon="flight">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
  </TkTabsItem>
  <TkTabsItem label="Tab label" icon="flight">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
  </TkTabsItem>
  <TkTabsItem label="Tab label" icon="flight">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate nequequas!</p>
  </TkTabsItem>
</TkTabs>

Tabs API

Props

Type	Default	Description
`number`	0	Controls the currently active tab index. Can be controlled programmatically from outside.
`"center", "end", "start"`	'start'	Sets the alignment of the header.
`CSSStyleProperties`	null	The style attribute of container element
`CSSStyleProperties`	null	The style attribute of tabs item element
`boolean`	false	Controls if the tabs component is controlled.
`number`	0	Default Active Index for tabs component.
`CSSStyleProperties`	null	The style attribute of headers container element
`boolean`	false	Controls if tabs are closable.
`boolean`	false	Controls if new tabs can be added or not.
`"horizontal", "vertical"`	'horizontal'	Controls the orientation of the tabs component.
`"base", "large", "small", "xsmall", "xxsmall"`	'base'	Controls the size of the tabs component.
`boolean`	false	Determines whether the tab headers will spread evenly across the horizontal space.
`"basic", "compact", "divided", "expanded"`	'basic'	Controls the tab style of the tabs component.
`"info", "neutral", "primary"`	'primary'	Controls the color variant of the tabs component.

Events

Name	Description
tk-tab-change	Triggered when the currently open tab changes. Returns the active index.
tk-tab-click	Triggered when a tab is clicked. Returns the clicked tab index.

Tabs Item API

Props

Type	Default	Description
`number, string`	null	Sets badge component's count.
`string`	null	Sets badge component's label.
`boolean`	false	Checks if tab item has badge component or not.
`boolean`	null	Whether the tab item is disabled.
`IIconOptions, string`	null	Icon for tabs item component.
`string`	null	Label for the tab item.
`ITooltipOptions`	null	Sets tooltip options for the tab item.

Type​

Variants​

Spread Headers​

Align Headers​

Sizes​

Orientation​

Programmatic Control​

Controlled​

Closable​

Tabs API​

Props​

Events​

Tabs Item API​

Props​

Type

Variants

Spread Headers

Align Headers

Sizes

Orientation

Programmatic Control

Controlled

Closable

Tabs API

Props

Events

Tabs Item API

Props