Buefy — Tabs

Buefy is a UI framework that’s based on Bulma.

In this article, we’ll look at how to use Buefy in our Vue app.

Tabs

We can add tabs with the b-tabs component from Buefy.

To add them, we can write:

<template>
  <div id="app">
    <b-tabs v-model="activeTab">
      <b-tab-item label="Pictures">Lorem ipsum dolor sit amet.</b-tab-item>
      <b-tab-item label="Music">Lorem ipsum</b-tab-item>
      <b-tab-item visible label="Books">What light is light, if Silvia be not seen?</b-tab-item>
      <b-tab-item label="Videos" disabled>Nunc nec velit nec libero vestibulum eleifend.</b-tab-item>
    </b-tabs>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      activeTab: undefined
    };
  }
};
</script>

We add the b-tabs component as the wrapper.

b-tab-item has the tab item.

label has the tab headings.

visible prop makes the tab item visible.

disabled prevents us from clicking the tab.

The v-model sets the index of the active tab as we click the tab.

We can also set the index to change the tab programmatically.

Dynamic Tabs

We can toggle tabs on and off dynamically:

<template>
  <section>
    <div class="block">
      <b-switch v-model="showBooks">Show books item</b-switch>
    </div>
    <b-tabs v-model="activeTab" :multiline="multiline">
      <template v-for="tab in tabs">
        <b-tab-item
          v-if="tab.displayed"
          :key="tab.id"
          :value="tab.id"
          :label="tab.label"
        >{{ tab.content }}</b-tab-item>
      </template>
    </b-tabs>
  </section>
</template>

<script>
export default {
  data() {
    return {
      activeTab: "pictures",
      showMusic: true,
      showBooks: false,
      multiline: true
    };
  },
  computed: {
    baseTabs() {
      return [
        {
          id: "pictures",
          label: "Pictures",
          content: "Pictures: Lorem ipsum",
          displayed: true
        },
        {
          id: "music",
          label: "Music",
          content: "Music: Lorem ipsum",
          displayed: this.showMusic
        },
        {
          id: "videos",
          label: "Videos",
          content: "Videos: Lorem ipsum",
          displayed: true
        }
      ];
    },
    tabs() {
      const tabs = [...this.baseTabs];
      if (this.showBooks) {
        tabs.splice(tabs.length - 2, 0, this.bookTab);
      }
      return tabs;
    },
    bookTab() {
      return {
        id: "books",
        label: "Books",
        content: "Books: Lorem ipsum.",
        displayed: true
      };
    }
  }
};
</script>

We have the tabs computed property to insert the Books tab when the showBooks reactive property is true .

Position

We can change the positions of the tabs with the position prop:

<template>
  <section>
    <b-tabs position="is-centered" class="block">
      <b-tab-item label="Pictures"></b-tab-item>
      <b-tab-item label="Music"></b-tab-item>
      <b-tab-item label="Videos"></b-tab-item>
    </b-tabs>
  </section>
</template>

<script>
export default {};
</script>

is-centered centers the tabs. is-right puts the tabs on the right.

Icons

We can add icons to the tab items with the icon and icon-pack props:

<template>
  <section>
    <b-tabs position="is-centered" class="block">
      <b-tab-item label="Pictures" icon="address-book" icon-pack="fa"></b-tab-item>
      <b-tab-item label="Music" icon="bandcamp" icon-pack="fa"></b-tab-item>
      <b-tab-item label="Videos" icon="drivers-license-o" icon-pack="fa"></b-tab-item>
    </b-tabs>
  </section>
</template>

<script>
export default {};
</script>

We have the icon-pack prop to set the icon pack name.

fa is for Font Awesome.

We add the CSS into the public/index.html file:

<link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />

Conclusion

We can add tabs to our Vue app with Buefy.