Buefy — Dropdowns

Photo by Jimmy Chang 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.

Dropdown

Buefy comes with its own dropdown component.

For example, we can add one by writing:

<template>
  <section>
    <b-dropdown aria-role="list">
      <button class="button is-primary" slot="trigger" slot-scope="{ active }">
        <span>Click me!</span>
        {{active ? '&#x2191;': '&#x2193;'}}
      </button>
<b-dropdown-item aria-role="listitem">foo</b-dropdown-item>
      <b-dropdown-item aria-role="listitem">bar</b-dropdown-item>
      <b-dropdown-item aria-role="listitem">baz</b-dropdown-item>
    </b-dropdown>
  </section>
</template>
<script>
export default {
  name: "App"
};
</script>

The trigger slot has the button to trigger the dropdown.

active indicates whether the dropdown is open or not.

We can add a right-click menu with:

<template>
  <section>
    <b-dropdown :triggers="['contextmenu']">
      <button class="button is-link" slot="trigger" role="button">Right click</button>
      <b-dropdown-item aria-role="listitem">foo</b-dropdown-item>
      <b-dropdown-item…