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.
