Accessible Tabs Component For Vue 3

A simple lightweight tabs component for Vue.js 3 applications, built with accessibility in mind.

It actively tries to avoid visual duplicates and has proper keyboard interactions. For example, using keyboard navigation to switch tabs is great for screen reader users.

The tabs component uses the fragment of the URL to choose which tab to open. It also remembers which tab was opened previously. If you reload without fragment the tab that is currently active will receive focus again.

How to use it:

1. Import the component and register it globally.

import { createApp } from 'vue'
import {Tabs, Tab} from 'vue3-tabs-component';
createApp(App)
  .component('tabs', Tabs)
  .component('tab', Tab)
  .mount('#app')

2. Or locally.

import Vue from 'vue';
import {Tabs, Tab} from 'vue3-tabs-component';
Vue.component('tabs', Tabs);
Vue.component('tab', Tab);

3. Add the tabs component to the template.

<div>
  <tabs :options="{ useUrlFragment: false }" @clicked="tabClicked" @changed="tabChanged" nav-item-class="nav-item" cache-lifetime="10">
    <tab name="First tab">
      Tab 1
    </tab>
    <tab name="Second tab">
      Tab 2
    </tab>
    <tab name="Disabled tab" :is-disabled="true">
      Disabled Tab
    </tab>
    <tab id="my-fragment" name="Custom fragment">
      Custom Fragment
    </tab>
    <tab prefix="<span class='glyphicon glyphicon-star'></span> " 
       name="Prefix and suffix" 
       suffix=" <span class='badge'>4</span>">
      A prefix and a suffix can be added
    </tab>
  </tabs>
</div>
export default {
  methods: {
    tabClicked (selectedTab) {
      console.log('Current tab re-clicked:' + selectedTab.tab.name)
    },
    tabChanged (selectedTab) {
      console.log('Tab changed to:' + selectedTab.tab.name)
    }
  }
}

4. Available props for the tabs.

cacheLifetime: {
  default: 5,
},
options: {
  type: Object,
  required: false,
  default: () => ({
    useUrlFragment: true,
    defaultTabHash: null,
  }),
},
wrapperClass: {
  type: String,
  default: 'tabs-component'
},
panelsWrapperClass: {
  type: String,
  default: 'tabs-component-panels'
},
navClass: {
  type: String,
  default: 'tabs-component-tabs'
},
navItemClass: {
  type: String,
  default: 'tabs-component-tab'
},
navItemDisabledClass: {
  type: String,
  default: 'is-disabled'
},
navItemActiveClass: {
  type: String,
  default: 'is-active'
},
navItemLinkClass: {
  type: String,
  default: 'tabs-component-tab-a'
},
navItemLinkActiveClass: {
  type: String,
  default: 'is-active'
},
navItemLinkDisabledClass: {
  type: String,
  default: 'is-disabled'
},

5. Available props for the tab.

panelClass: {
  type: String,
  default: 'tabs-component-panel'
},
id: {
  type: String,
  default: null
},
name: {
  type: String,
  required: true
},
prefix: {
  type: String,
  default: ''
},
suffix: {
  type: String,
  default: ''
},
isDisabled: {
  type: Boolean,
  default: false
},

Preview:

Accessible Tabs Component For Vue 3

Changelog:

v1.0.8 (05/15/2022)

  • Fix server side rendering for Tabs component to use the window object after mounting

v1.0.7 (04/24/2022)

  • Fix tab active state persistence when a Tab’s props are changed

Download Details:

Author: Jacobs63

Live Demo: https://tabs-component.jakubpotocky.sk/

Download Link: https://github.com/Jacobs63/vue3-tabs-component/archive/refs/heads/master.zip

Official Website: https://github.com/Jacobs63/vue3-tabs-component

Install & Download:

Tags:

Add Comment