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

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: string, 
  tablist: string, 
  tab: string
  tabActive: string
  panel: string
  panelActive: string
}"

Events

The component emits a tabChange event when the tab changes from a click or keydown.

Event arguments are passed in an object with the following properties:

• event: The original event object
• tab: The slot name for the active tab (ie 'Tab Label 1')
• index: The active index of the tab

<template>
  <VTabs @tabChange="tabChanged">
    <template slot="Tab Label 1">
      This is my content for tab 1
    </template>

    <template slot="Tab Label 2">
      Here's the content for tab 2.
      <p>It supports markup, and any any other components.</p>
    </template>
  </VTabs>
</template>

<script>
// SomeComponent.vue
import { VTabs } from 'vuetensils/src/components';

export default {
  components: {
    VTabs,
  },
  methods: {
    tabChanged({ event, tab, index }) {
      if (tab === "Tab Label 1") {
        // Do something
      }
    }
  }
};
</script>