Vue3 Accessible Tabs

A simple tabs component plugin for Vue 3. Follows the Tabs Design Pattern in WAI-ARIA Authoring Practices 1.1 for accessibility best practices automatically built into the plugin.

Install

npm i vue3-accessible-tabs

yarn add vue3-acccessible-tabs

Register as a Global Component

import { createApp } from 'vue';
import App from './App.vue'
import vue3_accessible_accordion from 'vue3-accessible-tabs';

const app = createApp(App)
            .use(vue3_accessible_tabs);
            .mount('#app')

Register Components Individually

import Tabs, TabList, Tab, TabPanel from 'vue3-accessible-tabs';

export default {
    components: {
        Tabs,
        TabList,
        Tab,
        TabPanel,
    }
}

Example Usage

<tabs>
    <tab-list>
        <tab>Description</tab>
        <tab>Specifications</tab>
        <tab>Reviews</tab>
    </tab-list>

    <tab-panel>Description tab info</tab-panel>
    <tab-panel>Specifications tab info</tab-panel>
    <tab-panel>Review tab info</tab-panel>
</tabs>

Config

Plugin Options

import { createApp } from 'vue';
import App from './App.vue'
import vue3_accessible_accordion from 'vue3-accessible-tabs';

const app = createApp(App)
            .use(vue3_accessible_tabs, {
                hash_change: false,
                active_class: 'is-active',
                diasbled_classes: 'is-disabled',
                tab_movement: false,
            });
            .mount('#app')

Option	Type	Default	Description
hash_change	Boolean	false	Controls whether tabs should use fragments
active_class	String	'is-active'	CSS class added to a tab and tab panel when they are active
disabled_class	String	'is-disabled'	CSS class added to a tab and tab panel when they are disabled
tab_movement	Boolean	false	Controls whether a tab should become active if it receives focus

Components

`<tabs>`

Props | Prop | Type | Default | Required | Description | | ---------- | ------ | --------- | -------- | ----------- | | modelValue | Number | 0 | No | Index of the tab that should initially be active | | id | String | undefined | No | ID to set on the tab panel and be linked to the tab automatically. Will control the fragment being used if the hash_change option is true|

Events

None

`<tab-list>`

Props | Prop | Type | Default | Required | Description | | ----- | ------ | ------- | -------- | ----------- | | label | String | Tabs | Yes | Value for the aria-label attribute to provide a descriptive label of the tab list |

Events

None

`<tab>`

Props | Prop | Type | Default | Required | Description | | ---- | ---- | ------- | -------- | ----------- | | tag | String | a | No | HTML tag to wrap around the text of the tab | | disabled | Boolean | false | No | Controls whether the tab should be disabled or not | | activeClass | String | is-active | No | CSS class added when the tab is active | | disabledClass | String | is-disabled | No | CSS class added when the tab is disabled |

Events

None

Scoped Slots

is-active

Project setup

yarn

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

パッケージの詳細