https://github.com/wagerfield/vue-tabbing

Tabbing navigation utility for Vue
https://github.com/wagerfield/vue-tabbing

Last synced: 6 days ago
JSON representation

Tabbing navigation utility for Vue

• Host: GitHub
• URL: https://github.com/wagerfield/vue-tabbing
• Owner: wagerfield
• License: mit
• Created: 2019-02-08T12:57:10.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2020-03-31T01:46:25.000Z (over 4 years ago)
• Last Synced: 2024-12-20T01:38:15.997Z (9 days ago)
• Language: JavaScript
• Size: 57.6 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# Vue Tabbing

1. Adds a reactive `$tabbing` boolean property to [Vue instances][vue-instances].

2. Adds a `tabbing` class to the root `html` node while the user is tabbing.

This is useful for conditionally rendering or styling content when the user is navigating with the tab key. Think accessibility.

    yarn add vue-tabbing

## Setup

```js

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:

```scss

.tabbing :focus {

  outline: 3px solid #4fc08d;

  outline-offset: 3px;

}

```

Conditionally render content in a component:

```vue

  
{{$tabbing ? 'Nice' : 'Try'}} tabbing.


```

## Author

[Matthew Wagerfield][github]

## License

[MIT][mit]

[vue-instances]: https://vuejs.org/v2/guide/instance

[mit]: https://opensource.org/licenses/MIT

[github]: https://github.com/wagerfield