# Tabs

Show and hide content based on which tabs are selected.

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.

# Installation

Globally:

// main.js
import Vue from 'vue';
import { VTabs } from 'vuetensils/src/components';

Vue.component('VTabs', VTabs);

Locally:

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

export default {
  components: {
    VTabs,
  },
  // ...
};
</script>

# 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

# 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' }"
Last Updated: 10/17/2020, 2:28:03 PM