Oruga
Theme ➜ Bulma

Pagination ​

A responsive and flexible pagination

Examples ​

Base

Current: 10

Show code

Slots

Show code

Class props ​

'Classes applied to the element'
How does the Class props inspector work?
Class propDescriptionPropsSuffixes
buttonClassClass of the link button.
🔍 Classes applied have a higher specificity than expected when mobileClass is applied
buttonCurrentClassClass of the current link.
buttonDisabledClassClass of the disabled link.
buttonNextClassClass of the next button.
🔍 Classes applied have a higher specificity than expected when mobileClass is applied
buttonPrevClassClass of the prev button.
🔍 Classes applied have a higher specificity than expected when mobileClass is applied
ellipsisClassClass of the pagination ellipsis.
🔍 Classes applied have a higher specificity than expected when mobileClass is applied
infoClassClass of the info in `simple` mode.simple
listClassClass of the pagination list.
🔍 Classes applied have a higher specificity than expected when mobileClass is applied
listItemClassClass of the pagination list items.
mobileClassClass of pagination component when on mobile.
👉 Switch to mobile view to see it in action!
orderClassClass of the pagination order.ordercentered
right
left
rootClassClass of the root element.
roundedClassClass of the pagination when rounded.rounded
simpleClassClass of the pagination in `simple` mode.simple
sizeClassClass for the pagination size.sizesmall
medium
large

Pagination component ​

A responsive and flexible pagination

html
<o-pagination></o-pagination>

Props ​

Prop nameDescriptionTypeValuesDefault
ariaCurrentLabelAccessibility label for the current page button.string-
From config:
pagination: {
  ariaCurrentLabel: "Current page"
}
ariaNextLabelAccessibility label for the next page button.string-
From config:
pagination: {
  ariaNextLabel: "Next page"
}
ariaPageLabelAccessibility label for the page button.string-
From config:
pagination: {
  ariaPageLabel: "page"
}
ariaPreviousLabelAccessibility label for the previous page button.string-
From config:
pagination: {
  ariaPreviousLabel: "Previous page"
}
buttonTagPagination button tag nameDynamicComponent-
From config:
pagination: {
  buttonTag: "button"
}
currentCurrent page number, use v-model:current to make it two-way bindingnumber-1
iconNextIcon to use for next buttonstring-
From config:
pagination: {
  iconNext: "chevron-right"
}
iconPackIcon pack to usestringmdi, fa, fas and any other custom icon pack
From config:
pagination: {
  iconPack: undefined
}
iconPrevIcon to use for previous buttonstring-
From config:
pagination: {
  iconPrev: "chevron-left"
}
mobileBreakpointMobile breakpoint as max-width valuestring-
From config:
pagination: {
  mobileBreakpoint: undefined
}
orderButtons orderstringcentered, right, left
From config:
pagination: {
  order: "right"
}
overrideOverride existing theme classes completelyboolean-
perPageItems count for each pagestring | number-
From config:
pagination: {
  perPage: 20
}
rangeAfterNumber of pagination items to show after current page.number-1
rangeBeforeNumber of pagination items to show before current page.number-1
roundedEnable rounded button styleboolean-
From config:
pagination: {
  rounded: false
}
simpleEnable simple styleboolean-
From config:
pagination: {
  simple: false
}
sizePagination sizestringsmall, medium, large
From config:
pagination: {
  size: undefined
}
totalTotal count of itemsnumber-

Events ​

Event namePropertiesDescription
update:currentvalue number - updated current propcurrent prop two-way binding
changevalue number - current valueon current change event

Slots ​

NameDescriptionBindings
previousPrevious button slotnumber number - page number
isCurrent boolean - if page is current
onClick (event:Event): void - click handler
ariaLabel string - aria-label attribute
nextNext button slotnumber number - page number
isCurrent boolean - if page is current
onClick (event:Event): void - click handler
ariaLabel string - aria-label attribute
defaultPagination button slotnumber 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 VariableDefault
$pagination-disabled-opacityvar(--#{$prefix}base-disabled-opacity)
$pagination-ellipsis-colorvar(--#{$prefix}grey-light)
$pagination-link-border-colorvar(--#{$prefix}grey-lighter)
$pagination-link-border-radiusvar(--#{$prefix}base-border-radius)
$pagination-link-border1px solid transparent
$pagination-link-color#363636
$pagination-link-current-background-colorvar(--#{$prefix}primary)
$pagination-link-current-border-colorvar(--#{$prefix}primary)
$pagination-link-current-color#fff
$pagination-link-height2.25em
$pagination-link-hover-border-colorvar(--#{$prefix}grey-light)
$pagination-link-line-heightvar(--#{$prefix}base-line-height)
$pagination-link-margin0.25rem
$pagination-link-min-width2.25em
$pagination-link-padding0.5em 0.5em
$pagination-margin-0.25rem
$pagination-rounded-border-radiusvar( --#{$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 VariableDefault
$pagination-items-spacer0.5rem

See ➜ 📄 Full scss file

Released under the MIT License.

Copyright © 2020-2024 Walter Tommasi