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.
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.
#web-development #javascript #software-development #technology #programming