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.
