# Pagination

A responsive and flexible pagination


edit on github

# Examples

# Base

# Slots

# Props

Prop name Description Type Values Default
total Total count of items number|string -
perPage Items count for each page number|string - Config -> 'pagination.perPage': 20
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
rangeBefore Number of pagination items to show before current page number|string - 1
rangeAfter Number of pagination items to show after current page number|string - 1
size Pagination size, optional string small, medium, large
simple Simple style boolean -
rounded Rounded button styles boolean -
order Buttons order, optional string centered, right, left
iconPack Icon pack to use string mdi, fa, fas and any other custom icon pack
iconPrev Icon to use for previous button string - Config -> 'pagination.iconPrev': 'chevron-left'
iconNext Icon to use for next button string - Config -> 'pagination.iconNext': 'chevron-right'
ariaNextLabel string -
ariaPreviousLabel string -
ariaPageLabel string -
ariaCurrentLabel string -
rootClass string -
prevBtnClass string -
nextBtnClass string -
listClass string -
linkClass string -
linkCurrentClass string -
ellipsisClass string -
infoClass string -
orderClass string -
simpleClass string -
roundedClass string -
sizeClass string -

# Events

Event name Type Description
change undefined
update:current undefined

# Slots

Name Description Bindings
previous [
{
"name": "linkClass"
},
{
"name": "linkCurrentClass"
},
{
"name": "page"
}
]
next [
{
"name": "linkClass"
},
{
"name": "linkCurrentClass"
},
{
"name": "page"
}
]
default [
{
"name": "page"
},
{
"name": "linkClass"
},
{
"name": "linkCurrentClass"
}
]

# Style

CSS Variable SASS Variable Default
--oruga-pagination-disabled-opacity $pagination-disabled-opacity $base-disabled-opacity
--oruga-pagination-ellipsis-color $pagination-ellipsis-color #b5b5b5
--oruga-pagination-font-size $pagination-font-size 1rem
--oruga-pagination-link-border-color $pagination-link-border-color #dbdbdb
--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 #b5b5b5
--oruga-pagination-link-hover-color $pagination-link-hover-color #363636
--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-margin $pagination-margin -.25rem
--oruga-pagination-mobile-breakpoint $pagination-mobile-breakpoint 768px
--oruga-pagination-rounded-border-radius $pagination-rounded-border-radius $base-rounded-border-radius