@a11y-kit/vue-tabs

1.0.1 • Public • Published

@a11y-kit/vue-tabs

Badge displaying current bundle size Badge displaying current release Badge displaying current release Badge displaying current release Badge displaying current release

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

Package Sidebar

Install

npm i @a11y-kit/vue-tabs

Homepage

a11y-kit.com

Weekly Downloads

144

Version

1.0.1

License

MIT

Unpacked Size

58.1 kB

Total Files

15

Last publish

Collaborators

  • stabback