Vue Tabbing

1. Adds a reactive $tabbing boolean property to Vue instances.
2. Adds a tabbing class to the root html node while the user is tabbing.

This is useful for conditionally showing/hiding/styling content when the user is navigating with the tab key.

yarn add vue-tabbing

Setup

import Vue from "vue"
import VueTabbing from "vue-tabbing"
 
Vue.use(VueTabbing, { /* options */ })

Options

Key	Type	Default	Description
className	String	"tabbing"	Class name to add to the root html node when the user navigating using the tab key. Pass false to prevent a class from being set.

Usage

Conditionally style content in focus:

.tabbing :focus {
  outline: 3px solid #4fc08d;
  outline-offset: 3px;
}

Conditionally render content in a component:

<template>
  <p>{{$tabbing ? 'Nice' : 'Try'}} tabbing.</p>
</template>

Author

Matthew Wagerfield

License

MIT