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 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>
        <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"
            :current.sync="current"
            :order="order"
            :size="size"
            :simple="isSimple"
            :rounded="isRounded"
            :per-page="perPage"
            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: 1,
                perPage: 20,
                order: '',
                size: '',
                isSimple: false,
                isRounded: false
            }
        }
    }
</script>

API

Name
Description
Type
Values
Default
totalTotal count of items Number
per-pageItems count for each page Number 20
currentCurrent page number, use the .sync modifier to make it two-way binding Number 1
orderButtons order, optional String is-centered, is-right
sizePagination size, optional String is-small, is-medium, is-large
simpleSimpler style Boolean false
icon-packIcon pack to use String mdi, fa, fas, far, fad, falmdi
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

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

Improve this page on GitHub