https://github.com/wovue/focus-trap
A Vue component that traps focus
https://github.com/wovue/focus-trap
Last synced: 7 months ago
JSON representation
A Vue component that traps focus
- Host: GitHub
- URL: https://github.com/wovue/focus-trap
- Owner: wovue
- Created: 2016-09-19T00:59:44.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-05-17T19:46:00.000Z (over 7 years ago)
- Last Synced: 2025-04-20T10:41:40.810Z (7 months ago)
- Language: JavaScript
- Homepage: https://wovue.github.io/focus-trap
- Size: 484 KB
- Stars: 5
- Watchers: 1
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue-refactor - vue-focus-trap
- awesome-vuejs - vue-focus-trap - A Vue component that traps focus for Vue.js, it is a wrapper around [focus-trap](https://github.com/davidtheclark/focus-trap). <sup>1.x compatible</sup> (Awesome Vue.js / Component Collections)
README
# FocusTrap
> A Vue component that traps focus
This component is a light wrapper around [focus-trap](https://github.com/davidtheclark/focus-trap), tailored to your Vue-specific needs.
## Live examples & Docs
[https://wovue.github.io/focus-trap](https://wovue.github.io/focus-trap)
## Features
* The focus trap automatically activates on ready hook (by default, though this can be changed).
* The focus trap automatically deactivates on destroyed hook.
* The focus trap can be activated and deactivated, paused and unpaused via props.
## Getting Started
Please read [the focus-trap documentation](https://github.com/davidtheclark/focus-trap#focus-trap) to understand what a focus trap is, what happens when a focus trap is activated, and what happens when one is deactivated.
Install the package using npm
```sh
$ npm install wovue-focus-trap --save
```
Install the plugin
```js
import Vue from 'vue'
import FocusTrap from 'wovue-focus-trap'
Vue.use(FocusTrap)
```
## Basic Usage
```html
mount trap
Here is a focus trap with some focusable parts.
toggle trap
```
```js
export default {
data () {
return {
isTrapVisible: false,
isTrapActive: true
}
},
methods: {
mountTrap () {
this.isTrapVisible = true
},
toggleTrap () {
this.isTrapActive = !this.isTrapActive
}
}
}
```
## Development
``` bash
# install dependencies
npm install
# serve with hot reload src-docs at localhost:8080
npm run dev
# build for production with minification src-docs and src
npm run build
# copy docs folder to gh-pages branch and push
npm run deploy-docs
```