Buefy — Message Box

Image for post
Image for post
Photo by Simon Berger 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.

Message

We can add a message box with color with Buefy.

We can add it with the b-message component:

<template>
<div id="app">
<b-message title="Default" v-model="isActive">Lorem ipsum dolor sit amet</b-message>
</div>
</template>
<script>
export default {
name: "App",
data(){
return {
isActive: true
}
}
};
</script>

title has the title.

v-model lets us control the open and close state.

The default slot has the content.

The color scheme can be changed with the type prop:

<template>
<div id="app">
<b-message type="is-success" title="Default" v-model="isActive">Lorem ipsum dolor sit amet</b-message>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isActive: true
};
}
};
</script>

We can add an icon with the has-icon prop:

<template>
<div id="app">
<b-message
type="is-success"
has-icon
title="Default"
icon="address-book"
icon-pack="fa"
v-model="isActive"
>Lorem ipsum dolor sit amet</b-message>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isActive: true
};
}
};
</script>

We add the icon , icon-pack , and has-icon props to show the icon.

icon-pack is the icon pack name.

'fa' is Font Awesome.

icon has the icon class name.

In public/index.html , we add:

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

to the head tag to make the Font Awesome icons available.

The title prop is optional, so we can remove it to show a message box without the header:

<template>
<div id="app">
<b-message v-model="isActive">Lorem ipsum dolor sit amet</b-message>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isActive: true
};
}
};
</script>

The size prop changes the size:

<template>
<div id="app">
<b-message size="is-large" v-model="isActive">Lorem ipsum dolor sit amet</b-message>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isActive: true
};
}
};
</script>

The auto-close prop makes it close automatically:

<template>
<div id="app">
<b-message auto-close v-model="isActive">Lorem ipsum dolor sit amet</b-message>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isActive: true
};
}
};
</script>

The duration that it’s visible can be set with the duration prop:

<template>
<div id="app">
<b-message :duration="2000" auto-close v-model="isActive">Lorem ipsum dolor sit amet</b-message>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isActive: true
};
}
};
</script>

The number is in milliseconds.

Conclusion

We can add a message box with Buefy’s b-message component.

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