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 add tabs to our Vue apps.
We can add tabbable panes into our app with the b-tabs
component.
For example, we can write:
<template>
<div id="app">
<b-tabs content-class="mt-3">
<b-tab title="First" active>
<p>first tab</p>
</b-tab>
<b-tab title="Second">
<p>second tab</p>
</b-tab>
<b-tab title="Disabled" disabled>
<p>Bisabled tab</p>
</b-tab>
</b-tabs>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We added the b-tabs
component which houses the b-tab
components.
b-tab
has the tab heading as set by the title
.
We can click on a tab heading to go to a tab.
disabled
means the tab is disabled.
We can’t go to a disabled tab.
#javascript #software-development #programming #web-development #technology