vue-tabbing
v0.1.0 vue plugin tabbing navigation
Vue Tabbing
- Adds a reactive
$tabbingboolean property to Vue instances. - Adds a
tabbingclass to the roothtmlnode 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>
