To make good looking Vue apps, we need to style our components.
To make our lives easier, we can use components with styles built-in.
We look at how to customize the tabs that we added, including how to navigate tabs with code via v-model and refs methods.
Add Custom Classes to nav-tab or Pills
We can set our own class with the title-link-class prop.
For example, we can write:
<template>
<div id="app">
<b-tabs>
<b-tab title="Tab 1" title-link-class="tab">Tab 1</b-tab>
<b-tab title="Tab 2" title-link-class="tab">Tab 2</b-tab>
</b-tabs>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
<style>
.tab {
color: red
}
</style>
We added the tab class, which we set as the value of title-link-class .
Because of the class’s style, we’ll see that the nav text is red when we hover over it.
Lazy Load Tab Content
We can add the lazy prop to lazy load tab content.
This means that the content is loaded only when it’s shown.
For example, we can write:
<template>
<div id="app">
<b-tabs>
<b-tab title="Tab 1">Tab 1</b-tab>
<b-tab title="Tab 2" lazy>Tab 2</b-tab>
</b-tabs>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Now the 2nd tab’s content only loads when it’s being shown.
We can make all tabs lazy by putting lazy in b-tabs :
<template>
<div id="app">
<b-tabs lazy>
<b-tab title="Tab 1">Tab 1</b-tab>
<b-tab title="Tab 2">Tab 2</b-tab>
</b-tabs>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Keyboard Navigation
We can navigate tabs with the keyboard.
Left or up activates the previous non-disabled tab.
Right or down activates the next non-disabled tab.
Shift+Left or Shift+Up activates the first non-disabled tab.
Home activates the first non-disabled tab.
Shift+Rigbt or Shift+Down activates the last non-disabled tav.
End activates the last non-disabled tab.
Tab moves focus to the active tab component.
Shift+Tab moves focus to the previous control on the page.
We can disable keyboard navigation with the no-key-nav prop.
Then the behavior will be the same as the regular behavior with the Tab key.
Tab will move to the next button or control on the page.
Shift+tab moves to the previous button or control on the page.
Enter or Space activates the currently focused button’s tab.
Programmatically Activate and Deactivate Tabs
We can add the active prop to active a tab.
Also, we can use the activate to activate a tab.
And the deactivate method to deactivate a tab.
For example, we can write:
<template>
<div id="app">
<b-tabs>
<b-tab title="Tab 1">Tab 1</b-tab>
<b-tab ref="tab2" title="Tab 2">Tab 2</b-tab>
</b-tabs>
</div>
</template>
<script>
export default {
name: "App",
mounted() {
this.$refs.tab2.activate();
}
};
</script>
We added a ref to the 2nd tab.
Then in the mounted hook, which is run when the component is loaded, we called the activate method on it.
Tab 2 will then be the active tab when the component is loaded.
v-model
We can add v-model to b-tabs . The value will be the currently active tab.
The first tab is 0, the 2nd tab is 1, and so on.
For example, we can write:
<template>
<div id="app">
<b-tabs v-model="tab">
<b-tab title="Tab 1">Tab 1</b-tab>
<b-tab title="Tab 2">Tab 2</b-tab>
</b-tabs>
<b-button @click="next">Next</b-button>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
tab: 0
};
},
methods: {
next() {
this.tab = (this.tab + 1) % 2;
}
}
};
</script>
We added the Next button which calls next when clicked.
In next , we updated this.tabs with the next tab’s index.
It’ll go back to the first when we click next when the 2nd tab is displayed.
this.tab is bound to the b-tabs component’s tab index with the v-model directive.
Therefore, when we click Next, we’ll cycle through the tabs.
Conclusion
We can control how tabs are displayed programmatically.
Also, keyboard navigation is supported by BootstrapVue tabs.
We can also add custom classes to tab controls.
Photo by 