@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

    Install

    npm i @a11y-kit/vue-tabs

    Homepage

    a11y-kit.com

    DownloadsWeekly Downloads

    149

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    58.1 kB

    Total Files

    15

    Last publish

    Collaborators

    • stabback