BootstrapVue — Tabs

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.

Tabs

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.

Cards Integration

We can put tabs into cards.

For instance, we can write:

<template>  
  <div id="app">  
    <b-card no-body>  
      <b-tabs card>  
        <b-tab title="One" active>  
          <b-card-text>Tab 1</b-card-text>  
        </b-tab>  
        <b-tab title="Two">  
          <b-card-text>Tab 2</b-card-text>  
        </b-tab>  
      </b-tabs>  
    </b-card>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

We disable the card body with the no-body prop.

Then we can display the tab content by putting b-tabs inside the b-card .

We can use b-card-text in a b-tab to display the content in the card.

We set the default active tab with the active prop.

The card prop on b-tabs make it work in card mode so that it looks correct in a card.

Subcomponents in b-tab will have the card-body class applied if it’s in card mode.

For example, if we have:

<template>  
  <div id="app">  
    <b-card no-body>  
      <b-tabs card>  
        <b-tab title="One" active>  
          <b-card-img bottom src="https://placekitten.com/200/200" alt="kitten"></b-card-img>  
          <b-card-footer>kitten</b-card-footer>  
        </b-tab>  
        <b-tab title="Two">  
          <b-card-text>Tab 2</b-card-text>  
        </b-tab>  
      </b-tabs>  
    </b-card>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

Then everything inside has the card-body class added.

Pills

We can display tabs in pills form with the pills prop:

<template>  
  <div id="app">  
    <b-card no-body>  
      <b-tabs pills card>  
        <b-tab title="Tab 1" active>  
          <b-card-text>Tab 1</b-card-text>  
        </b-tab>  
        <b-tab title="Tab 2">  
          <b-card-text>Tab 2</b-card-text>  
        </b-tab>  
      </b-tabs>  
    </b-card>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

Fill

The fill prop can be used to fill the available horizontal space proportionally with the tabs.

For example, we can write:

<template>  
  <div id="app">  
    <b-tabs fill>  
      <b-tab title="Tab 1" active>  
        <b-card-text>Tab 1</b-card-text>  
      </b-tab>  
      <b-tab title="Tab 2">  
        <b-card-text>Tab 2</b-card-text>  
      </b-tab>  
    </b-tabs>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

Justified

The justified prop lets us make the tabs equal width:

<template>  
  <div id="app">  
    <b-tabs justified>  
      <b-tab title="Tab 1" active>  
        <b-card-text>Tab 1</b-card-text>  
      </b-tab>  
      <b-tab title="Tab 2">  
        <b-card-text>Tab 2</b-card-text>  
      </b-tab>  
    </b-tabs>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

Alignment

The align prop lets us align the tabs.

The possible values are left , center , and right .

Therefore, we can write:

<template>  
  <div id="app">  
    <b-tabs align="center">  
      <b-tab title="Tab 1" active>  
        <b-card-text>Tab 1</b-card-text>  
      </b-tab>  
      <b-tab title="Tab 2">  
        <b-card-text>Tab 2</b-card-text>  
      </b-tab>  
    </b-tabs>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

Bottom Placement of Tab Controls

We can place the tab controls below the tab content with the end prop:

<template>  
  <div id="app">  
    <b-card no-body>  
      <b-tabs pills card end>  
        <b-tab title="Tab 1" active>  
          <b-card-text>Tab 1</b-card-text>  
        </b-tab>  
        <b-tab title="Tab 2">  
          <b-card-text>Tab 2</b-card-text>  
        </b-tab>  
      </b-tabs>  
    </b-card>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

It looks better will the pills prop to make the controls look like a button.

Conclusion

We can add tabs to display tabbed content.

It also integrates with cards.