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.
Snackbar
A snackbar is a simple popup component.
We call the this.$buefy.snackbar.open method to open it:
<template>
<section>
<button class="button is-medium" @click="snackbar">Launch snackbar</button>
</section>
</template>
<script>
export default {
methods: {
snackbar() {
this.$buefy.snackbar.open(`snackbar`);
}
}
};
</script>
We can add more options to it”
<template>
<section>
<button class="button is-medium" @click="snackbar">Launch snackbar</button>
</section>
</template>
<script>
export default {
methods: {
snackbar() {
this.$buefy.snackbar.open({
duration: 5000,
message: "<b>snackbar</b>",
type: "is-danger",
position: "is-bottom-left",
actionText: "Undo",
queue: false,
onAction: () => {
this.$buefy.toast.open({
message: "Action pressed",
queue: false
});
}
});
}
}
};
</script>
duration sets how long it’s shown in milliseconds.
message sets the message text. It can include HTML.
type sets the color of the snackbar text.
position sets the position.
actionText sets the text of the action.
queue sets whether the snackbar should queue with other notices.
onAction is run when the action text is clicked.
Steps
Buefy comes with a stepper to display the steps that users should take.
For example, we can write:
<template>
<section>
<b-steps
v-model="activeStep"
:animated="isAnimated"
:rounded="isRounded"
:has-navigation="hasNavigation"
:icon-prev="prevIcon"
:icon-next="nextIcon"
:label-position="labelPosition"
:mobile-mode="mobileMode"
icon-pack="fa"
>
<b-step-item step="1" label="First" :clickable="isStepsClickable">
<h1 class="title has-text-centered">Account</h1>
</b-step-item>
<b-step-item
step="2"
label="Second"
:clickable="isStepsClickable"
:type="{'is-success': isProfileSuccess}"
>
<h1 class="title has-text-centered">Profile</h1>
</b-step-item>
<b-step-item step="3" :visible="showSocial" label="Social" :clickable="isStepsClickable">
<h1 class="title has-text-centered">Social</h1>
</b-step-item>
<b-step-item
:step="showSocial ? '4' : '3'"
label="Finish"
:clickable="isStepsClickable"
disabled
>
<h1 class="title has-text-centered">Finish</h1>
</b-step-item>
<template v-if="customNavigation" slot="navigation" slot-scope="{previous, next}">
<b-button
outlined
type="is-danger"
icon-pack="fa"
icon-left="arrow-circle-left"
:disabled="previous.disabled"
@click.prevent="previous.action"
>Previous</b-button>
<b-button
outlined
type="is-success"
icon-pack="fa"
icon-right="arrow-circle-right"
:disabled="next.disabled"
@click.prevent="next.action"
>Next</b-button>
</template>
</b-steps>
</section>
</template>
<script>
export default {
data() {
return {
activeStep: 0,
showSocial: false,
isAnimated: true,
isRounded: true,
isStepsClickable: false,
hasNavigation: true,
customNavigation: false,
isProfileSuccess: false,
prevIcon: "arrow-circle-left",
nextIcon: "arrow-circle-right",
labelPosition: "bottom",
mobileMode: "minimalist"
};
}
};
</script>
We add the b-steps component to add the steps.
b-step-item has the content that we display below the step number.
icon-prev has the icon for the previous button.
icon-next has the icon for the next button.
animated lets us enable or disable animation.
rounded lets us make the step icon rounded.
icon-pack sets the icon pack to use.
'fa' is for Font Awesome.
has-navigation enables or disables navigation buttons.
The icons are added by the link tag:
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous"
/>
with the public/index.html.
The navigation slot lets us add our own navigation controls.
previous and next has the methods to let us go forward and backward.
disabled lets us know when to disable the nav buttons.
Conclusion
We can add notifications and steps display with Buefy.
