Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

vue-tabbing

0.1.0 • Public • Published

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

Install

npm i vue-tabbing

DownloadsWeekly Downloads

51

Version

0.1.0

License

MIT

Unpacked Size

4.46 kB

Total Files

4

Last publish

Collaborators

  • avatar