Permalink
Browse files

feat(tabs): add key nav prop like button toolbar has (#1733)

  • Loading branch information...
emanuelmutschlechner authored and pi0 committed Apr 15, 2018
1 parent 89eff3c commit bc3b82b5808dfd25d91a4777a227a9a2158099f3
Showing with 31 additions and 4 deletions.
  1. +15 −0 src/components/tabs/README.md
  2. +16 −4 src/components/tabs/tabs.js
@@ -295,6 +295,21 @@ export default {
<!-- with-classes.vue -->
```
## Keyboard Navigation
Enable optional keyboard navigation by setting the prop `key-nav`.
| Keypress | Action
| -------- | ------
| <kbd>LEFT</kbd> or <kbd>UP</kbd> | Move to the previous non-disabled tab
| <kbd>RIGHT</kbd> or <kbd>DOWN</kbd> | Move to the next non-disabled tab
| <kbd>SHIFT</kbd>+<kbd>LEFT</kbd> or <kbd>SHIFT</kbd>+<kbd>UP</kbd> | Move to the first non-disabled tab
| <kbd>SHIFT</kbd>+<kbd>RIGHT</kbd> or <kbd>SHIFT</kbd>+<kbd>DOWN</kbd> | Move to the last non-disabled tab
| <kbd>TAB</kbd> | Move to the next control on the page
| <kbd>SHIFT</kbd>+<kbd>TAB</kbd> | Move to the previous control on the page
**Caution:** If you have text or text-like inputs in your tabs, leave keyboard navigation off,
as it is not possble to use key presses to jump out of a text (or test-like) inputs.
## Advanced Examples
@@ -15,7 +15,8 @@ const bTabButtonHelper = {
active: { type: Boolean, default: false },
disabled: { type: Boolean, default: false },
linkClass: { default: null },
itemClass: { default: null }
itemClass: { default: null },
keyNav: { type: Boolean, default: false }
},
render (h) {
const link = h('a', {
@@ -26,7 +27,7 @@ const bTabButtonHelper = {
],
attrs: {
role: 'tab',
tabindex: '-1',
tabindex: this.keyNav ? '-1' : null,
href: this.href,
id: this.id,
disabled: this.disabled,
@@ -52,6 +53,9 @@ const bTabButtonHelper = {
evt.preventDefault()
evt.stopPropagation()
}
if (evt.type !== 'click' && !this.keyNav) {
return
}
if (this.disabled) {
stop()
return
@@ -86,7 +90,8 @@ export default {
posInSet: index + 1,
controls: this.safeId('_BV_tab_container_'),
linkClass: tab.titleLinkClass,
itemClass: tab.titleItemClass
itemClass: tab.titleItemClass,
keyNav: this.keyNav
},
on: {
click: evt => {
@@ -116,7 +121,7 @@ export default {
],
attrs: {
role: 'tablist',
tabindex: '0',
tabindex: this.keyNav ? '0' : null,
id: this.safeId('_BV_tab_controls_')
},
on: { keydown: this.onKeynav }
@@ -237,6 +242,10 @@ export default {
navWrapperClass: {
type: [String, Array, Object],
default: null
},
keyNav: {
type: Boolean,
default: false
}
},
watch: {
@@ -280,6 +289,9 @@ export default {
* handle keyboard navigation
*/
onKeynav (evt) {
if (!this.keyNav) {
return
}
const key = evt.keyCode
const shift = evt.shiftKey
function stop () {

0 comments on commit bc3b82b

Please sign in to comment.