Buefy — Loading Placeholder and Sidebar

Image for post
Image for post
Photo by Erol Ahmed 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.

Skeleton Loading Placeholder

Buefy comes with a skeleton component that we can use as a placeholder to show when content is loading.

To add it, we can use the b-skeleton component:

<template>
<section>
<b-skeleton width="20%" animated></b-skeleton>
<b-skeleton width="40%" animated></b-skeleton>
<b-skeleton width="60%" animated></b-skeleton>
<b-skeleton width="80%" animated></b-skeleton>
</section>
</template>
<script>
export default {
data() {
return {};
},
methods: {}
};
</script>

width has the width of the bar as the percentage of the screen viewport.

animated makes it animated.

Also, we can add a circle placeholder with the circle prop:

<template>
<section>
<figure class="media-left">
<p class="image is-64x64">
<b-skeleton circle width="64px" height="64px"></b-skeleton>
</p>
</figure>
</section>
</template>
<script>
export default {
data() {
return {};
},
methods: {}
};
</script>

Sidebar

We can add a sidebar with the b-sidebar component.

For instance, we can write:

<template>
<section>
<b-sidebar
type="is-light"
:fullheight="fullheight"
:fullwidth="fullwidth"
:overlay="overlay"
:right="right"
v-model="open"
>
<div class="p-1">
<img src="https://picsum.photos/id/1/100/50" alt="logo">
<b-menu>
<b-menu-list label="Menu">
<b-menu-item label="Info"></b-menu-item>
<b-menu-item icon="settings">
<template slot="label" slot-scope="props">Administrator
<b-icon class="is-pulled-right" :icon="props.expanded ? 'menu-down' : 'menu-up'"></b-icon>
</template>
<b-menu-item label="Users"></b-menu-item>
<b-menu-item>
<template slot="label">Devices
<b-dropdown aria-role="list" class="is-pulled-right" position="is-bottom-left">
<b-icon icon="dots-vertical" 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>
</b-menu-list>
<b-menu-list label="Actions">
<b-menu-item label="Logout"></b-menu-item>
</b-menu-list>
</b-menu>
</div>
</b-sidebar>
</section>
</template>
<script>
export default {
data() {
return {
open: true,
overlay: true,
fullheight: true,
fullwidth: false,
right: false
};
}
};
</script>
<style>
.p-1 {
padding: 1em;
}
</style>

to add a sidebar with the b-sidebar component.

type sets the color style.

fullHeight makes it full height.

fullWidth makes it full width.

overlay add an overlay below the sidebar.

right makes it display on the right.

v-model controls the open state of the sidebar.

We can make it static with the position prop et to 'static' :

<template>
<section>
<b-sidebar
position="static"
:fullheight="fullheight"
:fullwidth="fullwidth"
:right="right"
v-model="open"
>
<div class="p-1">
<img src="https://picsum.photos/id/1/100/50" alt="logo">
<b-menu>
<b-menu-list label="Menu">
<b-menu-item label="Info"></b-menu-item>
<b-menu-item icon="settings">
<template slot="label" slot-scope="props">Administrator
<b-icon class="is-pulled-right" :icon="props.expanded ? 'menu-down' : 'menu-up'"></b-icon>
</template>
<b-menu-item label="Users"></b-menu-item>
<b-menu-item>
<template slot="label">Devices
<b-dropdown aria-role="list" class="is-pulled-right" position="is-bottom-left">
<b-icon icon="dots-vertical" 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>
</b-menu-list>
<b-menu-list label="Actions">
<b-menu-item label="Logout"></b-menu-item>
</b-menu-list>
</b-menu>
</div>
</b-sidebar>
</section>
</template>
<script>
export default {
data() {
return {
open: true,
overlay: true,
fullheight: true,
fullwidth: false,
right: false
};
}
};
</script>
<style>
.p-1 {
padding: 1em;
}
</style>

Conclusion

We can add placeholders to show when content is loading and a sidebar 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