2.0.14 • Published 2 years ago
vue-js-spatial-navigation v2.0.14
vue-js-spatial-navigation
Vue directive of js-spatial-navigation;
Installation
NPM
npm install vue-js-spatial-navigation
Getting Started
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 thescrollIntoViewOptions
.The page will not scroll to the focus element when setting
scrollOptions
to""
ornull
.
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
$SpatialNavigation
A global Vue instance property for SpatialNavigation;
// you can access SpatialNavigation in every instance
this.$SpatialNavigation;
v-focus
A directive that make the element focusable.
The element with v-focus
must under the element with v-focus-section
, see v-focus-section
<div v-focus>
<div></div>
</div>
dynamic control
<div v-focus="focusable">
<div></div>
</div>
<script>
export default {
data() {
return {
focusable: false
};
},
methods: {
changeFocusable() {
this.focusable = !this.focusable;
}
}
};
</script>
v-focus-section
A directive that define a focus Section
<div v-focus-section>
<div v-focus>
<div></div>
</div>
<div v-focus>
<div></div>
</div>
</div>
Pass a specified section id
<!-- section id -->
<div v-focus-section:my-section>
<div v-focus></div>
</div>
Set configuration
<!-- set configuration -->
<div v-focus-section:my-section="{enterTo:'last-focused'}">
<div v-focus></div>
</div>
Set default section
<!-- set default section -->
<div v-focus-section:my-section.default="{enterTo:'last-focused'}">
<div v-focus></div>
</div>
v-disable-focus-section
This directive will make the conponemt unnavigable. See SpatialNavigation.disable(), SpatialNavigation.enable().
<div v-focus-section v-disable-focus-section="disable">
<div v-focus></div>
</div>
<script>
export default {
data() {
return {
disable: false
};
},
methods: {
changeDisable() {
this.disable = !this.disable;
}
}
};
</script>