Buefy — Collapse Component

Image for post
Image for post
Photo by BASIL ANAS 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.

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="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 ? '&#x2193;' : '&#x2191;'}}</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 ? '&#x2191;': '&#x2193;' }}
</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.

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