VueWaiTabs

Features

A Vue.js tab component that adhere's to the W3C Web Accessibility Initiative.

Components

TabsContainer: The TabsContainer component is the parent container for tab component.

TabsContainerTablist: The TabsContainerTablist component contains a list of tab buttons.

TabsContainerTablistTab: The TabsContainerTablistTab component is the tab button itself. Each tab button its own attributes based on its index in the TabList.

TabsContainerTabPanel: The TabsContainerTabPanel component houses each tabs content.

Attributes

TabsContainerTablistTab

• :controls - this attribute must match the :id attribute in the TabsContainerTabPanel component.

Example

<template>
  <div id="app">
    <TabsContainer>
      <TabsContainerTablist>
        <TabsContainerTablistTab
          v-for="(tabItem, tabIndex) in items"
          :key="tabIndex"
          :id="`tab-panel_${tabIndex}`"
          :controls="`tab-panel_${tabIndex}`"
        >
           {{ tabItem }} tab button
        </TabsContainerTablistTab>
      </TabsContainerTablist>
      <div>
        <TabsContainerTabPanel
          v-for="(tabItem, tabIndex) in items"
          :key="tabIndex"
          :id="`tab-panel_${tabIndex}`"
          :transitionProps="{ name: 'fade' }"
        >
          {{ tabItem }} tab content
        </TabsContainerTabPanel>
      </div>
    </TabsContainer>
  </div>
</template>

<script>
export default {
  name: 'ExampleComponent',
  data() {
    return {
      items: [
        'item one',
        'item two',
        'item three',
      ],
    };
  },
};
</script>

In some cases you may want to add a function that parses, for our example, the tabItem:

Example

methods: {
  handleLabel(label) {
    return label.split(' ').join('-').toLowerCase();
  },
},

Invocation

:controls="`tab-panel_${handleLabel(tabItem)}`" //for the TabsContainerTablistTab component

:id="`tab-panel_${tabIndex}`" // for the TabsContainerTabPanel component

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Lints and fixes files

yarn run lint

License

MIT