Buefy — Tags and Tooltips

Image for post
Image for post
Photo by Louis Hansel @shotsoflouis on Unsplash

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.

Tag List

We add a list of tags with the b-taglist component.

To add it, we write:

<template>
<div id="app">
<b-taglist>
<b-tag type="is-info">First</b-tag>
<b-tag type="is-info">Second</b-tag>
<b-tag type="is-info">Third</b-tag>
</b-taglist>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

We just put all the b-tag components inside.

The attached prop will attach 2 tags together:

<template>
<div id="app">
<b-taglist attached>
<b-tag type="is-dark">npm</b-tag>
<b-tag type="is-info">6</b-tag>
</b-taglist>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

Also, we can combine fields to group attached tags:

<template>
<div id="app">
<b-field grouped group-multiline>
<div class="control">
<b-tag type="is-primary" attached closable>Technology</b-tag>
</div>
<div class="control">
<b-tag type="is-primary" attached closable>Vuejs</b-tag>
</div>
<div class="control">
<b-tag type="is-primary" attached closable>CSS</b-tag>
</div>
</b-field>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

We put them all in the b-field component with the grouped and grouped-multiline props to group them together.

Sizes and Types

We can change the color with the type prop:

<template>
<div id="app">
<b-tag type="is-info">Technology</b-tag>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

And we can change the size with the size prop:

<template>
<div id="app">
<b-tag size="is-large">Technology</b-tag>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

Toast

We can add toasts to display notifications.

For example, we can write:

<template>
<div id="app">
<button class="button is-medium" @click="toast">Launch toast</button>
</div>
</template>
<script>
export default {
name: "App",
methods: {
toast() {
this.$buefy.toast.open("toast");
}
}
};
</script>

We called the this.$buefy.toast.open method to display a toast with the text in the argument.

Also, we can set the background color with the type property. message has the message.

We can also change the duration that it’s displayed and its position with the duration and position properties:

<template>
<div id="app">
<button class="button is-medium" @click="toast">Launch toast</button>
</div>
</template>
<script>
export default {
name: "App",
methods: {
toast() {
this.$buefy.toast.open({
duration: 5000,
message: `Something's <b>not good</b>`,
position: "is-bottom",
type: "is-danger"
});
}
}
};
</script>

is-bottom places it at the bottom of the page.

Tooltip

Buefy comes with its own tooltip.

For example, we can write:

<template>
<div id="app">
<b-tooltip label="Tooltip right" position="is-right">
<button class="button is-dark">Right</button>
</b-tooltip>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

The b-tooltip component is wrapped around the trigger of the tooltip.

label has the tooltip text.

position has the position. It can be changed to other positions like is-left , is-bottom , etc.

We can add a delay with the delay prop:

<template>
<div id="app">
<b-tooltip label="Tooltip right" position="is-right" :delay="1000">
<button class="button is-dark">Right</button>
</b-tooltip>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

Multilined Tooltip

The multilined prop makes it multilined:

<template>
<div id="app">
<b-tooltip label="Tooltip right" position="is-right" multilined>
<button class="button is-dark">Right</button>
</b-tooltip>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

Conclusion

We can add tags and tooltips to our Vue app with Buefy.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store