Buefy — Collapse and Dialogs

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.

open determines the index of the collapse item to open.

animation has the animation effect.

The @open listener listens to clicks on a collapse and expands the one that’s clicked on and collapses the rest.

Also, we populate the trigger slot to populate the heading of the accordion item.

props.open determines which one is expanded.

Alert Dialog

Buefy comes with a dialog component.

To use it, we can write:

<template>
  <section>
    <button class="button is-primary" @click="alert">Launch alert</button>
  </section>
</template>

<script>
export default {
  name: "App",
  methods: {
    alert() {
      this.$buefy.dialog.alert("hello world!");
    }
  }
};
</script>

to display an alert when we click on the button.

We can add a title with the message.

For example, we can write:

<template>
  <section>
    <button class="button is-primary" @click="alert">Launch alert</button>
  </section>
</template>

<script>
export default {
  name: "App",
  methods: {
    alert() {
      this.$buefy.dialog.alert({
        title: "Title",
        message: "<b>hello world</b>",
        confirmText: "OK"
      });
    }
  }
};
</script>

We have an alert with a title and HTML content for the message.

The confirmText lets us set the confirmation text.

Also, we can add an icon to the alert.

For example, we can write:

<template>
  <section>
    <button class="button is-primary" @click="alert">Launch alert</button>
  </section>
</template>

<script>
export default {
  name: "App",
  methods: {
    alert() {
      this.$buefy.dialog.alert({
        title: "Title",
        message: "<b>error</b>",
        confirmText: "OK",
        type: "is-danger",
        hasIcon: true,
        icon: "times-circle",
        iconPack: "fa"
      });
    }
  }
};
</script>

to add an icon to our alert dialog.

icon and iconPack sets the icon classes that are added to the message.

Confirm Dialog

We can add a confirm dialog with the confirm method.

For example, we can write:

<template>
  <section>
    <button class="button is-primary" @click="confirm">Launch confirm</button>
  </section>
</template>

<script>
export default {
  name: "App",
  methods: {
    confirm() {
      this.$buefy.dialog.confirm({
        message: "Are you sure?",
        onConfirm: () => this.$buefy.toast.open("confirmed")
      });
    }
  }
};
</script>

We call the confirm method with an object to set the message and an onConfirm callback that’s run after we click the button to dismiss it.

Also, we can add a title with the message:

<template>
  <section>
    <button class="button is-primary" @click="confirm">Launch confirm</button>
  </section>
</template>

<script>
export default {
  name: "App",
  methods: {
    confirm() {
      this.$buefy.dialog.confirm({
        title: "Title",
        message: "Are you sure?",
        onConfirm: () => this.$buefy.toast.open("confirmed")
      });
    }
  }
};
</script>

Conclusion

We can add accordions and dialog boxes easily with Buefy.