Skip to content

Pagination.md

Latest commit

 

History

History
136 lines (100 loc) · 15.4 KB

Pagination.md

File metadata and controls

136 lines (100 loc) · 15.4 KB

Pagination

The Pagination component is responsive and flexible way to indicate a series of related content exists across multiple pages. It can be used to displays data in paged format and provides navigation between pages. The root element is a HTML native nav element to indicate a navigation section. The component uses the Button component for the navigation elements.

Examples

Pagination Component

A responsive and flexible paginator navigation.

<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: PlainButton
}
current
deprecated - will be renamed to modelValue
Current page number, use v-model:current to make it two-way binding
 number - 1
disabled Buttons will be disabled boolean - false
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
deprecated - will be renamed to position
Buttons order
 "centered" | "left" | "right" centered, right, left
From config:
pagination: {
  order: undefined
}
override Override existing theme classes completely boolean -
perPage Items count for each page number | string -
From config:
pagination: {
  perPage: 20
}
position Buttons position order "centered" | "left" | "right" centered, right, left
From config:
pagination: {
  position: "right"
}
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
next event Event - native click event
value number - new current value		 on next button event click
previous event Event - native click event
value number - new current value		 on previous button 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

Class Inspector

Sass Variables

Current theme ➜ Oruga

SASS Variable Default
$pagination-spacer calc(0.5 * h.useVar("control-spacer"))
$pagination-disabled-opacity h.useVar("control-disabled-opacity")
$pagination-ellipsis-color h.useVar("grey-light")
$pagination-button-color h.useVar("font-color")
$pagination-button-font-size h.useVar("font-size")
$pagination-button-font-weight h.useVar("font-weight")
$pagination-button-line-height h.useVar("line-height")
$pagination-button-height 2.25em
$pagination-button-min-width $pagination-button-height
$pagination-button-padding h.useVar("control-spacer")
$pagination-button-box-shadow none
$pagination-button-border-width h.useVar("control-border-width")
$pagination-button-border-color h.useVar("control-border-color")
$pagination-button-border-style solid
$pagination-button-border-radius h.useVar("border-radius")
$pagination-button-border-radius-rounded h.useVar( "border-radius-rounded")
$pagination-button-background-color h.useVar( "control-brackground-color")
$pagination-button-hover-color $pagination-button-color
$pagination-button-hover-background-color $pagination-button-background-color
$pagination-button-hover-border-color $pagination-button-border-color
$pagination-button-current-color h.useVar("white")
$pagination-button-current-background-color h.useVar("primary")
$pagination-button-current-border-color h.useVar("primary")

See ➜ 📄 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 ➜ 📄 SCSS file