Buefy — Pagination and Progress Bar

Image for post
Image for post
Photo by Sam Shin 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.

Pagination

Buefy comes with a pagination component.

We can add it with the b-pagination component:

<template>
<section>
<b-pagination
:total="total"
v-model="current"
:range-before="rangeBefore"
:range-after="rangeAfter"
:order="order"
:size="size"
:simple="isSimple"
:rounded="isRounded"
:per-page="perPage"
:icon-prev="prevIcon"
:icon-next="nextIcon"
:iconPack="iconPack"
></b-pagination>
</section>
</template>
<script>
export default {
data() {
return {
total: 200,
current: 10,
perPage: 10,
rangeBefore: 3,
rangeAfter: 1,
order: "",
size: "",
isSimple: false,
isRounded: false,
iconPack: "fa",
prevIcon: "arrow-circle-left",
nextIcon: "arrow-circle-right"
};
},
methods: {}
};
</script>

iconPack has the icon pack to use.

'fa' is for Font Awesome.

prevIcon has the icon for going to the previous page.

nextIcon has the icon for going to the next page.

current has the current page.

total is the total number of pages.

perPage has the number of entries per page.

We add the icons by putting:

<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous"
/>

in the head tag of public/index.html .

Progress

We can add the progress bar with the b-progress component:

<template>
<section>
<b-progress></b-progress>
</section>
</template>
<script>
export default {
data() {
return {};
},
methods: {}
};
</script>

Since the value prop isn’t set, it’ll animate indefinitely.

We can set the progress value with the value prop:

<template>
<section>
<b-progress :value="80" show-value format="percent"></b-progress>
</section>
</template>
<script>
export default {
data() {
return {};
},
methods: {}
};
</script>

format has the text form to show in the bar.

The size prop changes the size:

<template>
<section>
<b-progress size="is-large"></b-progress>
</section>
</template>
<script>
export default {
data() {
return {};
},
methods: {}
};
</script>

We can add other props to it:

<template>
<section>
<b-progress
:type="type"
:size="size"
:max="50000"
:value="indeterminate ? undefined : 40000"
:show-value="showValue"
:format="format"
:precision="precision"
:keep-trailing-zeroes="keepTrailingZeroes"
:locale="locale"
></b-progress>
</section>
</template>
<script>
export default {
data() {
return {
indeterminate: false,
type: null,
size: "is-medium",
showValue: true,
format: "raw",
precision: 2,
keepTrailingZeroes: false,
locale: undefined
};
},
methods: {}
};
</script>

keepTrailingZeroes lets us set whether to show the railing zeroes in the value.

format is the number format.

indeterminate lets us set whether to animate forever.

size has the size.

showValue lets us set whether to show the value.

We can customize the value display by populating the default slot:

<template>
<section>
<b-progress :value="65" size="is-medium" show-value>65 / 100</b-progress>
</section>
</template>
<script>
export default {
data() {
return {};
},
methods: {}
};
</script>

Conclusion

We an add pagination links and progress bars 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