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.
Collapse
The collapse component is a component that lets us toggle items on and off.
To add it, we add the b-collapse component by writing:
<template>
<section>
<b-collapse :open="false">
<button class="button is-primary" slot="trigger">Click me!</button>
<div class="notification">
<div class="content">
<h3>Subtitle</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus.
</p>
</div>
</div>
</b-collapse>
</section>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
We add the b-collapse component with the button being in the trigger slot to use as the trigger for the collapse component.
Then content is anything outside the trigger slot in the b-collapse component.
Collapse Panel
We can add a tab panel by adding an element with the panel-tabs class:
<template>
<section>
<div class="block">
<button class="button is-medium is-primary" [@click](http://twitter.com/click "Twitter profile for @click")="isOpen = !isOpen">Toggle</button>
</div>
<b-collapse class="panel" animation="slide" v-model="isOpen">
<div slot="trigger" class="panel-heading" role="button" aria-controls="contentIdForA11y2">
<strong>Title</strong>
</div>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Public</a>
<a>Private</a>
</p>
<div class="panel-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus.
</div>
</b-collapse>
</section>
</template>
<script>
export default {
data() {
return {
isOpen: true
};
}
};
</script>
We have the b-collapse component with the p element with the panel-tabs class.
And we have the panel-block class on the div to display as the panel content.
Collapse Card
We can make a collapsible card by setting the class attribute of it to card .
The animation has the effect for the toggle.
For example, we can write:
<template>
<section>
<b-collapse class="card" animation="slide">
<div slot="trigger" slot-scope="props" class="card-header" role="button">
<p class="card-header-title">Component</p>
<a class="card-header-icon">{{props.open ? '↓' : '↑'}}</a>
</div>
<div class="card-content">
<div
class="content"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.</div>
</div>
<footer class="card-footer">
<a class="card-footer-item">OK</a>
<a class="card-footer-item">Cancel</a>
</footer>
</b-collapse>
</section>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
We have the elements with th card-header-title with the title.
card-header-icon has the icon.
And the card-content class is applied to the div with the content.
card-footer has the footer class, and card-footer-item is for the footer items.
props.open indicates whether the collapse component is expanded or not.
Collapse Position
We can place the b-collapse component anywhere we like.
For instance, we can place it inside another element by writing:
<template>
<section>
<div class="content">
<h3>Subtitle</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut vulputate semper dui.
</p>
</div>
<b-collapse :open="false" position="is-bottom">
<a slot="trigger" slot-scope="props">
{{ !props.open ? 'All options' : 'Fewer options' }}
{{props.open ? '↑': '↓' }}
</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus.
</p>
</b-collapse>
</section>
</template>
We add the b-collapse component inside the div instead of keeping it standalone.
Conclusion
We can add a collapse component with Buefy to add a toggleable container to our Vue app.
