Tabs

Show and hide content based on which tabs are selected.

• Source

Features:

• Manages ARIA roles for tablist, tab, and tabpanel.
• Manages ARIA attributes for aria-label, aria-selected, aria-controls, aria-labelledby.
• Provides keyboard navigation to focus on tabs and navigate between with arrow keys.

Keyboard navigation to the tabs only targets active tab. right key activates next tab (horizontal orientation) or loops around to start. left key activates previous tab (horizontal orientation) or loops around to end. down key activates next tab (vertical orientation) or loops around to start. down key activates previous tab (vertical orientation) or loops around to end. (in horizontal orientation), home key activates first tab. end key activates last tab.

Styled Example

.vts-tabs {
  overflow: hidden;
  border: 1px solid #CCC;
  border-radius: 0.25rem;
}

.vts-tabs [role="tablist"] {
  display: flex;
}

.vts-tabs [role="tab"] {
  flex-grow: 1;
  border: 0;
  padding: 0.5rem;
}

.vts-tabs [role="tab"][aria-selected="true"] {
  border-bottom-color: #FFF;
  background: #FFF;
}

.vts-tabs [role="tabpanel"] {
  padding: 1rem;
}

Basic Usage

Tabs and panels use slot names with this syntax: tab-{name}, panel-{name}. The names can be dynamic, but must be prefixed with tab- and panel-. Order is determined by source order.

Custom Classes

This component can accept a classes prop to customize the output HTML classes:

:classes="{ 
  root: 'root-class', 
  tablist: 'tablist-class', 
  tab: 'tab-class'
  tabActive: 'tabActive-class'
  panel: 'panel-class'
  panelActive: 'panelActive-class'
}"