Buefy — Loading Indicator and Menu

Image for post
Image for post
Photo by Erik-Jan Leusink 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.

Loading Indicator

We can add a loading indicator with the b-loading component:

<template>
<div id="app">
<b-loading is-full-page v-model="isLoading" :can-cancel="true"></b-loading>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isLoading: true
};
}
};
</script>

is-full-page sets the loading indicator to fill the page.

v-model binds to the isLoading state to let us control when it’s displayed.

can-cancel lets us close it with the Esc key with when it’s set to true .

We can open the loading indicator programmatically with the this.$buefy.loading.open method:

<template>
<div id="app" ref="element">
<button class="button is-primary is-medium" @click="open">load</button>
</div>
</template>
<script>
export default {
name: "App",
methods: {
open() {
const loadingComponent = this.$buefy.loading.open({
container: this.$refs.element.$el
});
setTimeout(() => loadingComponent.close(), 3 * 1000);
}
}
};
</script>

We call the method with the container property.

It sets the container for displaying the loading indicator.

We can set it to null to make it fill the screen.

The close method closes the loading indicator.

Also, we can create our own loading indicator by populating the default slot:

<template>
<div id="app" ref="element">
<b-loading is-full-page v-model="isLoading" :can-cancel="true">
<b-icon pack="fa" icon="circle-o-notch" size="is-large" custom-class="fa-spin"></b-icon>
</b-loading>
</div>
</template>
<script>
export default {
name: "App",
methods: {
isLoading: true
}
};
</script>

We set the loading indicator to an icon with the b-icon component.

fa-spin makes Font Awesome icons spin.

Menu

Buefy comes with a menu component.

For example, we can write:

<template>
<div id="app" ref="element">
<b-menu>
<b-menu-list label="Menu">
<b-menu-item icon="address-book" icon-pack="fa" label="Info"></b-menu-item>
<b-menu-item icon="settings" :active="isActive" expanded>
<template slot="label" slot-scope="props">
Administrator
{{props.expanded ? '&#x2193;' : '&#x2191;'}}
</template>
<b-menu-item label="Users"></b-menu-item>
<b-menu-item>
<template slot="label">Devices
<b-dropdown class="is-pulled-right" position="is-bottom-left">
<b-icon slot="trigger"></b-icon>
<b-dropdown-item>action 1</b-dropdown-item>
<b-dropdown-item>action 2</b-dropdown-item>
</b-dropdown>
</template>
</b-menu-item>
<b-menu-item label="Payments" disabled></b-menu-item>
</b-menu-item>
<b-menu-item label="My Account">
<b-menu-item label="Account data"></b-menu-item>
<b-menu-item label="Addresses"></b-menu-item>
</b-menu-item>
</b-menu-list>
<b-menu-list>
<b-menu-item label="Expo" tag="router-link" target="_blank" to="/expo"></b-menu-item>
</b-menu-list>
<b-menu-list label="Actions">
<b-menu-item label="Logout"></b-menu-item>
</b-menu-list>
</b-menu>
</div>
</template>
<script>
export default {
name: "App",
data() {
return { isActive: true };
}
};
</script>

We add the b-menu to add the menu.

b-menu-item has the menu items.

b-dropdown adds dropdowns.

b-menu-list is a menu list to separate the menu into sections.

Conclusion

We can add a loading indicator and menu easily with Buefy.

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