Skip to content

Pagination.md

Latest commit

 

History

History
125 lines (89 loc) · 11.6 KB

Pagination.md

File metadata and controls

125 lines (89 loc) · 11.6 KB

Pagination

The Pagination component is responsive and flexible way to indicate a series of related content exists across multiple pages.

Examples

Class props

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