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>
            <b-switch v-model="hasInput">input</b-switch>
        </div>
        <b-field grouped group-multiline>
            <b-field label="Input position">
                <b-select v-model="inputPosition">
                    <option value="">default</option>
                    <option value="is-input-right">is-input-right</option>
                    <option value="is-input-left">is-input-left</option>
                </b-select>
            </b-field>
            <b-field label="Debounce input">
                <b-input type="number" placeholder="milliseconds" v-model="inputDebounce" min="0"></b-input>
            </b-field>
        </b-field>

        <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"
            :page-input="hasInput"
            :page-input-position="inputPosition"
            :debounce-page-input="inputDebounce">
        </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,
                hasInput: false,
                prevIcon: 'chevron-left',
                nextIcon: 'chevron-right',
                inputPosition: '',
                inputDebounce: ''
            }
        }
    }
</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
v-modelCurrent page number, use the modelValue property to make it one-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
page-inputInclude page number input.Booleanfalse
page-input-positionPage input position.Stringis-input-right, is-input-left
debounce-page-inputSets the page input debounce time (in milliseconds)Number

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