Vue Tabbing
- Adds a reactive
$tabbing
boolean property to Vue instances. - Adds a
tabbing
class to the roothtml
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
Vue
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
Conditionally render content in a component:
<template> <p>{{$tabbing ? 'Nice' : 'Try'}} tabbing.</p></template>