README
@a11y-kit/vue-tabs
A suite of unstyled components which can be used to build an accessible tabs interface. The implementation is kept as close to the WCAG example as possible, while making it friendly to use in a Vue environment.
Installation
yarn add @a11y-kit/vue-tabs
or
npm i @a11y-kit/vue-tabs
Usage
<template>
<TabWrapper v-model="activeTab">
<TabList label="Animals">
<TabActivator tab="dogs">Dogs</TabActivator>
<TabActivator tab="cats">Cats</TabActivator>
</TabList>
<TabPanel tab="dogs">
Dogs are pretty cool. Here's some info about them.
</TabPanel>
<TabPanel tab="cats">
Cats are pretty neat too. Here's some stuff about them!
</TabPanel>
</TabWrapper>
</template>
<script>
import { TabActivator, TabList, TabPanel, TabWrapper } from '@a11y-kit/vue-tabs'
export default {
components: { TabActivator, TabList, TabPanel, TabWrapper },
data() {
return {
activeTab: ''
}
}
}
</script>