@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.

📖Full documentation

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>

📖Full documentation | More examples