# Pagination
A responsive and flexible pagination
# Examples
# Base
# Slots
# Class props
Class prop | Description | Props | Suffixes | |
---|---|---|---|---|
ellipsisClass | Class of the pagination ellipsis . 🔍 Classes applied have a higher specificity than expected when mobileClass is applied | |||
infoClass | Class of the info in `simple` mode. | simple | ||
linkClass | Class of the link button. 🔍 Classes applied have a higher specificity than expected when mobileClass is applied | |||
linkCurrentClass | Class of the current link. | |||
linkDisabledClass | Class of the disabled link. | |||
listClass | Class of the pagination list. 🔍 Classes applied have a higher specificity than expected when mobileClass is applied | |||
mobileClass | Class of pagination component when on mobile. 👉 Switch to mobile view to see it in action! | |||
nextBtnClass | Class of the next button. 🔍 Classes applied have a higher specificity than expected when mobileClass is applied | |||
orderClass | Class of the pagination order. | order | centered | |
prevBtnClass | Class of the prev. button. 🔍 Classes applied have a higher specificity than expected when mobileClass is applied | |||
rootClass | Class of the root element. | |||
roundedClass | Class of the pagination when rounded. | rounded | ||
simpleClass | Class of the pagination in `simple` mode. | simple | ||
sizeClass | Class for the pagination size. | size | small |
# Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
ariaCurrentLabel | string | - | ||
ariaNextLabel | string | - | ||
ariaPageLabel | string | - | ||
ariaPreviousLabel | string | - | ||
current | Current page number, use the .sync modifier (Vue 2.x) or v-model:current (Vue 3.x) to make it two-way binding | number|string | - | 1 |
iconNext | Icon to use for next button | string | - | From config pagination: { |
iconPack | Icon pack to use | string | mdi , fa , fas and any other custom icon pack | |
iconPrev | Icon to use for previous button | string | - | From config pagination: { |
mobileBreakpoint | Mobile breakpoint as max-width value | string | - | |
order | Buttons order, optional | string | centered , right , left | From config pagination: { |
override | Override classes | boolean | - | false |
perPage | Items count for each page | number|string | - | From config pagination: { |
rangeAfter | Number of pagination items to show after current page | number|string | - | 1 |
rangeBefore | Number of pagination items to show before current page | number|string | - | 1 |
rounded | Rounded button styles | boolean | - | |
simple | Simple style | boolean | - | |
size | Pagination size, optional | string | small , medium , large | |
total | Total count of items | number|string | - |
# Events
Event name | Properties | Description |
---|---|---|
change | ||
update:current |
# Slots
Name | Description | Bindings |
---|---|---|
previous | ||
next | ||
default |
# Style
CSS Variable | SASS Variable | Default |
---|---|---|
--oruga-pagination-disabled-opacity | $pagination-disabled-opacity | $base-disabled-opacity |
--oruga-pagination-ellipsis-color | $pagination-ellipsis-color | $grey-light |
--oruga-pagination-link-border-color | $pagination-link-border-color | $grey-lighter |
--oruga-pagination-link-border-radius | $pagination-link-border-radius | $base-border-radius |
--oruga-pagination-link-border | $pagination-link-border | 1px solid transparent |
--oruga-pagination-link-color | $pagination-link-color | #363636 |
--oruga-pagination-link-current-background-color | $pagination-link-current-background-color | $primary |
--oruga-pagination-link-current-border-color | $pagination-link-current-border-color | $primary // !!! |
--oruga-pagination-link-current-color | $pagination-link-current-color | #fff |
--oruga-pagination-link-height | $pagination-link-height | 2.25em |
--oruga-pagination-link-hover-border-color | $pagination-link-hover-border-color | $grey-light |
--oruga-pagination-link-line-height | $pagination-link-line-height | $base-line-height |
--oruga-pagination-link-margin | $pagination-link-margin | .25rem |
--oruga-pagination-link-min-width | $pagination-link-min-width | 2.25em |
--oruga-pagination-link-padding | $pagination-link-padding | .5em .5em |
--oruga-pagination-margin | $pagination-margin | -.25rem |
--oruga-pagination-rounded-border-radius | $pagination-rounded-border-radius | $base-rounded-border-radius |