Categories
Buefy

Buefy — Customize Tabs and Tags

Spread the love

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.

Tab Size

We can change the tab size with the size prop.

To do that, we write:

<template>
  <div id="app">
    <b-tabs size="is-small" 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>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

is-small makes the tabs extra small. We can also set it to is-medium or is-large .

Types

We can change the shape of the tab with the type prop. For example, we can write:

<template>
  <div id="app">
    <b-tabs type="is-toggle">
      <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>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

is-toggle changes it to a toggle button.

is-boxed is the default type which looks like tabs.

is-toggle-rounded make the buttons rounded.

Expanded

The expanded prop makes the tabs expanded to fill the width of the screen:

<template>
  <div id="app">
    <b-tabs expanded>
      <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>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Custom Headers

We can populate the header slot to customize the header of the tab item.

For example, we can write:

<template>
  <div id="app">
    <b-tabs expanded>
      <b-tab-item>
        <template slot="header">
          <b>Pictures</b>
        </template>
      </b-tab-item>
      <b-tab-item label="Music"></b-tab-item>
      <b-tab-item label="Videos"></b-tab-item>
    </b-tabs>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Now the Pictures tab is bolded.

Vertical Tabs

We can make the tabs vertical with the vertical prop:

<template>
  <div id="app">
    <b-tabs expanded vertical>
      <b-tab-item label="Pictures">pictures</b-tab-item>
      <b-tab-item label="Music">music</b-tab-item>
      <b-tab-item label="Videos">videos</b-tab-item>
    </b-tabs>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Tags

Tags are labels we can insert anywhere.

For example, we can write:

<template>
  <div id="app">
    <div class="field">
      <b-tag>Tag 1</b-tag>
    </div>
    <div class="field">
      <b-tag rounded>Tag 2</b-tag>
    </div>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We can add tags with the b-tag component and the tag text in between the tags.

Closable Tags

We can make a tag closeable with the closeable tag:

<template>
  <div id="app">
    <div class="field">
      <b-tag
        v-if="isTagActive"
        type="is-primary"
        closable
        @close="isTagActive = false"
      >closable tag</b-tag>
    </div>
  </div>
</template>

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

The close event should be emitted when we click the close button that’s displayed.

This way, we can use a reactive property to control when the tag is displayed.

Conclusion

We can customize our tabs and create tags with Buefy.

Leave a Reply

Your email address will not be published. Required fields are marked *