Pagination

A responsive and flexible pagination


<template>
    <section>
        <b-field grouped group-multiline>
            <b-field label="Total">
                <b-input type="number" v-model="total"></b-input>
            </b-field>
            <b-field label="Items per page">
                <b-input type="number" v-model="perPage"></b-input>
            </b-field>
        </b-field>
        <b-field grouped group-multiline>
            <b-field label="Show buttons before current">
                <b-input type="number" v-model="rangeBefore" min="0"></b-input>
            </b-field>
            <b-field label="Show buttons after current">
                <b-input type="number" v-model="rangeAfter" min="0"></b-input>
            </b-field>
        </b-field>
        <b-field grouped group-multiline>
            <b-field label="Order">
                <b-select v-model="order">
                    <option value="">default</option>
                    <option value="is-centered">is-centered</option>
                    <option value="is-right">is-right</option>
                </b-select>
            </b-field>
            <b-field label="Size">
                <b-select v-model="size">
                    <option value="">default</option>
                    <option value="is-small">is-small</option>
                    <option value="is-medium">is-medium</option>
                    <option value="is-large">is-large</option>
                </b-select>
            </b-field>
        </b-field>
        <b-field grouped group-multiline>
            <b-field label="Previous icon">
                <b-select v-model="prevIcon">
                    <option value="chevron-left">Chevron</option>
                    <option value="arrow-left">Arrow</option>
                </b-select>
            </b-field>
            <b-field label="Next icon">
                <b-select v-model="nextIcon">
                    <option value="chevron-right">Chevron</option>
                    <option value="arrow-right">Arrow</option>
                </b-select>
            </b-field>
        </b-field>
        <div class="block">
            <b-switch v-model="isSimple">Simple</b-switch>
            <b-switch v-model="isRounded">Rounded</b-switch>
        </div>

        <hr>
        <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"
            aria-next-label="Next page"
            aria-previous-label="Previous page"
            aria-page-label="Page"
            aria-current-label="Current page">
        </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,
                prevIcon: 'chevron-left',
                nextIcon: 'chevron-right'
            }
        }
    }
</script>

# Custom pagination buttons

You can customize the buttons using b-pagination-button as scoped slot.

For example, you can customize the inner text or use router-link as tag.

<template>
    <section>
        <b-pagination
            :total="200"
            v-model="current"
            :per-page="10">

            <template #default="props">
                <b-pagination-button
                    :page="props.page"
                    :id="`page${props.page.number}`"
                    tag="router-link"
                    :to="`/documentation/pagination#page${props.page.number}`">
                    {{ convertToRoman(props.page.number) }}
                </b-pagination-button>
            </template>


            <template #previous="props">
                <b-pagination-button
                    :page="props.page"
                    tag="router-link"
                    :to="`/documentation/pagination#page${props.page.number}`">
                    Previous
                </b-pagination-button>
            </template>

            <template #next="props">
                <b-pagination-button
                    :page="props.page"
                    tag="router-link"
                    :to="`/documentation/pagination#page${props.page.number}`">
                    Next
                </b-pagination-button>
            </template>

        </b-pagination>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                current: 10,
                basicRomanNumeral: ['',
                    'I','II','III','IV','V','VI','VII','VIII','IX','',
                    'X','XX','XXX','XL','L','LX','LXX','LXXX','XC','',
                    'C','CC','CCC','CD','D','DC','DCC','DCCC','CM','',
                    'M','MM','MMM'
                ]
            }
        },
        methods: {
            convertToRoman(num) {
                const numArray = num.toString().split('');
                const base = numArray.length;
                let count = base-1;
                const convertedRoman = numArray.reduce((roman, digit) => {
                    const digitRoman = this.basicRomanNumeral[+digit + count*10];
                    const result = roman + digitRoman;
                    count -= 1;
                    return result;
                },'');
                return convertedRoman;
            }
        },
        watch: {
            $route: {
                immediate: true,
                handler(newVal, oldVal) {
                    if (newVal.hash) {
                        this.current = parseInt(newVal.hash.replace(/\#page/g, ''))
                    }
                },
            },
        }
    }
</script>

# API

Pagination

Name
Description
Type
Values
Default
totalTotal count of itemsNumber
per-pageItems count for each pageNumber20
range-beforeNumber of pagination items to show before current pageNumber1
range-afterItems to paginatation items to show after current pageNumber1
currentCurrent page number, use the .sync modifier to make it two-way bindingNumber1
orderButtons order, optionalStringis-centered, is-right
sizePagination size, optionalStringis-small, is-medium, is-large
simpleSimpler styleBooleanfalse
roundedRounded button stylesBooleanfalse
icon-packIcon pack to useStringmdi, fa, fas, far, fad, falmdi
icon-prevIcon to use for previous buttonStringchevron-left
icon-nextIcon to use for next buttonStringchevron-right
aria-next-labelAccessibility label for the next page link.String
aria-previous-labelAccessibility label for the previous page link.String
aria-page-labelAccessibility label for the page link. If passed, this text will be prepended to the number of the page.String
aria-current-labelAccessibility label for the current page link. If passed, this text will be prepended to the current page.String

Button

Name
Description
Type
Values
Default
pageThe prop page need to be passed upon the component (:page="props.page").Object
tagButton tag nameStringa, button, input, router-link, nuxt-link or other nuxt aliasa

# Variables

You can use these variables to customize this component.

Name
Default
Bulma variablesLink

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub