Buefy — Collapse and Dialogs

Photo by Ben White 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 Accordion

We can change the collapse component to have an accordion effect.

For example, we can write:

<template>
  <section>
    <b-collapse
      animation="slide"
      v-for="(collapse, index) of collapses"
      :key="index"
      :open="isOpen === index"
      @open="isOpen = index"
    >
      <div slot="trigger" slot-scope="props" class="card-header" role="button">
        <p class="card-header-title">{{ collapse.title }}</p>
        <a class="card-header-icon">{{props.open ? '&#x2193;' : '&#x2191;'}}</a>
      </div>
      <div class="card-content">
        <div class="content">{{ collapse.text }}</div>
      </div>
    </b-collapse>
  </section>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      isOpen: 0,
      collapses: [
        {
          title: "Title 1",
          text: "Text 1"
        },
        {
          title: "Title 2",
          text: "Text 2"
        },
        {
          title: "Title 3",
          text: "Text 3"
        }
      ]
    };
  }
};
</script>

We have the b-collapse components with some props.