Vue directive of js-spatial-navigation
npm install vue-js-spatial-navigationshell
npm install vue-js-spatial-navigation
`
Getting Started
`javascript
import Vue from "vue";
import vjsn from "vue-js-spatial-navigation";
Vue.use(vjsn);
`
#### Optional global Configuration
#### Additional configuration scrollOptions:
- The page will auto scroll to the focus element by using scrollIntoView.
- You can set this scrollOptions for the scrollIntoViewOptions.
- The page will not scroll to the focus element when setting scrollOptions to "" or null.
`javascript
const config = {
straightOnly: false,
straightOverlapThreshold: 0.5,
rememberSource: false,
disabled: false,
defaultElement: "",
enterTo: "",
leaveFor: null,
restrict: "self-first",
tabIndexIgnoreList: "a, input, select, textarea, button, iframe, [contentEditable=true]",
navigableFilter: null,
scrollOptions: { behavior: "smooth", block: "center" }
};
Vue.use(vjsn, config);
`
Documentation
$3
A global Vue instance property for SpatialNavigation;
`javascript
// you can access SpatialNavigation in every instance
this.$SpatialNavigation;
`
$3
A directive that make the element focusable.
The element with v-focus must under the element with v-focus-section, see v-focus-section
`html
`
#### dynamic control
`html
`
$3
A directive that define a focus Section
`html
`
#### Pass a specified section id
`html
`
#### Set configuration
`html
`
#### Set default section
`html
`
$3
This directive will make the conponemt unnavigable.
See SpatialNavigation.disable(),
SpatialNavigation.enable().
`html
``