Pagination

A responsive and flexible pagination

Examples

Base

Show code

HTML

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

    <hr />
    <o-pagination
        v-model:current="current"
        :total="total"
        :range-before="rangeBefore || 0"
        :range-after="rangeAfter || 0"
        :order="order"
        :size="size"
        :simple="isSimple"
        :rounded="isRounded"
        :per-page="perPage"
        :icon-prev="prevIcon"
        :icon-next="nextIcon" />

    <p><b>Current:</b> {{ current }}</p>
</section>

JS

import { ref } from "vue";

const rangeBefore = ref(3);
const rangeAfter = ref(1);
const isSimple = ref(false);
const isRounded = ref(false);
const prevIcon = ref("chevron-left");
const nextIcon = ref("chevron-right");
const total = ref(200);
const current = ref(10);
const perPage = ref(10);
const order = ref<"left" | "centered" | "right">("left");
const size = ref("");

Slots

Show code

HTML

<section>
    <o-pagination v-model:current="current" :total="200" :per-page="10">
        <template #default="props">
            <o-button
                :label="convertToRoman(props.number)"
                :disabled="props.isCurrent"
                :aria-label="props.ariaLabel"
                @click="props.onClick" />
        </template>
        <template #previous="props">
            <o-button
                label="Previous"
                :disabled="props.isCurrent"
                :aria-label="props.ariaLabel"
                @click="props.onClick" />
        </template>
        <template #next="props">
            <o-button
                label="Next"
                :disabled="props.isCurrent"
                :aria-label="props.ariaLabel"
                @click="props.onClick" />
        </template>
    </o-pagination>
</section>

JS

import { ref } from "vue";

const basicRomanNumeral = ref([
    "",
    "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",
]);

const current = ref(10);

function convertToRoman(num) {
    const numArray = num.toString().split("");
    const base = numArray.length;
    let count = base - 1;
    return numArray.reduce((roman, digit) => {
        const digitRoman = basicRomanNumeral.value[+digit + count * 10];
        const result = roman + digitRoman;
        count -= 1;
        return result;
    }, "");
}

Class props

'Classes applied to the element'

Pagination component

A responsive and flexible pagination

<o-pagination></o-pagination>

Props

Prop name	Description	Type	Values	Default
ariaCurrentLabel	Accessibility label for the current page button.	string	-	From config: pagination: {   ariaCurrentLabel: "Current page" }
ariaNextLabel	Accessibility label for the next page button.	string	-	From config: pagination: {   ariaNextLabel: "Next page" }
ariaPageLabel	Accessibility label for the page button.	string	-	From config: pagination: {   ariaPageLabel: "Page" }
ariaPreviousLabel	Accessibility label for the previous page button.	string	-	From config: pagination: {   ariaPreviousLabel: "Previous page" }
buttonTag	Pagination button tag name	DynamicComponent	-	From config: pagination: {   buttonTag: "button" }
current	Current page number, use v-model:current to make it two-way binding	number	-	1
iconNext	Icon to use for next button	string	-	From config: pagination: {   iconNext: "chevron-right" }
iconPack	Icon pack to use	string	mdi, fa, fas and any other custom icon pack	From config: pagination: {   iconPack: undefined }
iconPrev	Icon to use for previous button	string	-	From config: pagination: {   iconPrev: "chevron-left" }
mobileBreakpoint	Mobile breakpoint as max-width value	string	-	From config: pagination: {   mobileBreakpoint: undefined }
order	Buttons order	"centered" | "left" | "right"	centered, right, left	From config: pagination: {   order: "right" }
override	Override existing theme classes completely	boolean	-
perPage	Items count for each page	number | string	-	From config: pagination: {   perPage: 20 }
rangeAfter	Number of pagination items to show after current page.	number	-	1
rangeBefore	Number of pagination items to show before current page.	number	-	1
rounded	Enable rounded button style	boolean	-	From config: pagination: {   rounded: false }
simple	Enable simple style	boolean	-	From config: pagination: {   simple: false }
size	Pagination size	string	small, medium, large	From config: pagination: {   size: undefined }
total	Total count of items	number	-

Events

Event name	Properties	Description
update:current	value number - updated current prop	current prop two-way binding
change	value number - current value	on current change event

Slots

Name	Description	Bindings
previous	Previous button slot	number number - page number isCurrent boolean - if page is current onClick (event:Event): void - click handler ariaLabel string - aria-label attribute
next	Next button slot	number number - page number isCurrent boolean - if page is current onClick (event:Event): void - click handler ariaLabel string - aria-label attribute
default	Pagination button slot	number number - page number isCurrent boolean - if page is current onClick (event:Event): void - click handler ariaLabel string - aria-label attribute

Sass variables

Current theme ➜ Oruga

SASS Variable	Default
$pagination-disabled-opacity	var(--#{$prefix}base-disabled-opacity)
$pagination-ellipsis-color	var(--#{$prefix}grey-light)
$pagination-link-border-color	var(--#{$prefix}grey-lighter)
$pagination-link-border-radius	var(--#{$prefix}base-border-radius)
$pagination-link-border	1px solid transparent
$pagination-link-color	#363636
$pagination-link-current-background-color	var(--#{$prefix}primary)
$pagination-link-current-border-color	var(--#{$prefix}primary)
$pagination-link-current-color	#fff
$pagination-link-height	2.25em
$pagination-link-hover-border-color	var(--#{$prefix}grey-light)
$pagination-link-line-height	var(--#{$prefix}base-line-height)
$pagination-link-margin	0.25rem
$pagination-link-min-width	2.25em
$pagination-link-padding	0.5em 0.5em
$pagination-margin	-0.25rem
$pagination-rounded-border-radius	var( --#{$prefix}base-border-radius-rounded)

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

SASS Variable	Default
$pagination-items-spacer	0.5rem

See ➜ 📄 Full scss file