Tabs

Tabs are used as a form of navigation within the same context, allowing the user to alternate between views that provide different information. A count badge can also be used in a tab.

Tabs 

<tk-tabs-container>
  <tk-tabs>
    <tk-tab-button tab-selected="yourFunction()" tab-title="Gringotts" badge-type="light" badge-text="75"></tk-tab-button>
    <tk-tab-button is-active="true" tab-title="The Leaky Cauldron"></tk-tab-button>
    <tk-tab-button tab-title="Disabled Tab" disabled></tk-tab-button>
    <tk-tab-divider></tk-tab-divider>
    <tk-tab-link tab-title="Flourish & Blotts" url="https://www.pottermore.com/"></tk-tab-link>
  </tk-tabs>
</tk-tabs-container>

Description

Tab children can either be <tk-tab-button> or <tk-tab-link>. Most likely, you’ll want to use the button.

Vertical Tabs 

<tk-tabs-container>
  <tk-tabs vertical="true">
    <tk-tab-button tab-selected="yourFunction()" tab-title="Gringotts" badge-type="light" badge-text="75"></tk-tab-button>
    <tk-tab-button tab-title="The Leaky Cauldron1"></tk-tab-button>
    <tk-tab-button tab-title="The Leaky Cauldron2"></tk-tab-button>
    <tk-tab-button tab-title="Disabled Tab" disabled></tk-tab-button>
  </tk-tabs>
</tk-tabs-container>

Description

Tab children can either be <tk-tab-button> or <tk-tab-link>. Most likely, you’ll want to use the button.

Position: Center or Right 

<tk-tabs-container>
  <tk-tabs position="center">
    <tk-tab-button tab-title="Borgin & Burkes"></tk-tab-button>
    <tk-tab-button tab-title="Honeydukes"></tk-tab-button>
  </tk-tabs>
</tk-tabs-container>

Description

This sets the alignment of the tabs. The default is aligned to the left.

Props

Property Default Description
disabled false Disables the button or link.
position left Aligns the tab to the left, center, or right.
tabTitle '' String that sets the label of a tab.
url '' The href for a tk-tab-link.
isActive false Boolean for setting the active state of a tab. The first tab sets isActive to true if all other tabs are unset.
badgeText '' String for including a tk-badge count. If left off, no badge will be rendered.
badgeType light String for the type of tk-badge.
vertical false Tabs will be arranged vertically.

Events

Name Description
tabSelected Fired any time a tk-tab-button is selected. This allows you to show a tab, or fire a tracking event.

Do

  • Ensure there is always one active tab

Don't

  • Add a background behind the tab
  • Change the tab color or border

Accessibility

  • Receives :focus
  • aria-selected should be true when in focus and false when not