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