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.
Button Tags
We can change the tag of the button with the tag prop.
To use it, we can write:
<template>
<section>
<div class="buttons">
<b-button>Button</b-button>
<b-button tag="a" href="https://google.com" target="_blank">Anchor</b-button>
<b-button tag="input" native-type="submit" value="Submit input"/>
</div>
</section>
</template>
<script>
export default {};
</script>
We can set tag to 'a' or 'input' to change the tag to those.
Button Router Link
We can also display links as router-links .
For example, we can write:
<template>
<section>
<div class="buttons">
<b-button tag="router-link" to="/documentation" type="is-link">Docs</b-button>
</div>
</section>
</template>
<script>
export default {};
</script>
to render the b-button as a router-link component.
Carousel
Buefy comes with a carousel component.
For example, we can write:
<template>
<b-carousel>
<b-carousel-item v-for="(carousel, i) in carousels" :key="i">
<section>
<div class="hero-body has-text-centered">
<h1 class="title">{{carousel.text}}</h1>
</div>
</section>
</b-carousel-item>
</b-carousel>
</template>
<script>
export default {
data() {
return {
carousels: [{ text: "Slide 1" }, { text: "Slide 2" }, { text: "Slide 3" }]
};
}
};
</script>
to create a simple carousel with the b-carousel and b-carousel-item components.
b-carousel-item has the carousel items.
We can customize it with various props.
For example, we can write:
<template>
<b-carousel
v-model="carousel"
animated
has-drag
autoplay
pause-hover
pause-info
pause-info-type="is-primary"
:interval="2000"
repeat
[@change](http://twitter.com/change "Twitter profile for @change")="info($event)"
>
<b-carousel-item v-for="(carousel, i) in carousels" :key="i">
<section>
<div class="hero-body has-text-centered">
<h1 class="title">{{carousel.text}}</h1>
</div>
</section>
</b-carousel-item>
</b-carousel>
</template>
<script>
export default {
data() {
return {
carousel: 1,
carousels: [{ text: "Slide 1" }, { text: "Slide 2" }, { text: "Slide 3" }]
};
},
methods: {
info(e) {
console.log(e);
}
}
};
</script>
to add some props to our b-carousel component to adjust it.
autoplay makes the carousel play automatically.
pause-hover makes it pause on hover.
has-drag makes the slides draggable.
pause-info-type sets the type for when it’s paused.
repeat makes the slides repeat after the loop is done.
v-model has the slide index.
animated adds some animation effect to the carousel.
The @change event handler is run when the slide changes.
Carousel Arrow
We can add the arrow to the carousel.
For example, we can write:
<template>
<b-carousel
:arrow="arrow"
:repeat="arrowBoth"
:arrow-hover="arrowHover"
:icon-pack="iconPack"
:icon-prev="iconPrev"
:icon-next="iconNext"
:icon-size="iconSize"
>
<b-carousel-item v-for="(carousel, i) in carousels" :key="i">
<section>
<div class="hero-body has-text-centered">
<h1 class="title">{{carousel.text}}</h1>
</div>
</section>
</b-carousel-item>
</b-carousel>
</template>
<script>
export default {
data() {
return {
arrow: true,
arrowBoth: false,
arrowHover: false,
iconPack: "fa",
iconPrev: "arrow-left",
iconNext: "arrow-right",
iconSize: "10px",
carousels: [{ text: "Slide 1" }, { text: "Slide 2" }, { text: "Slide 3" }]
};
}
};
</script>
to use the arrow icons from Font Awesome 4.7.0 for our icons.
We set the icon class names with the icon-prev and icon-next props.
icon-pack sets the icon pack to use.
In index.html , we add the CSS by adding:
<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.
Conclusion
We can render buttons our way and add carousels with Buefy.
