Pagination

Example

Pagination items are automatically generated based on the total item count items and how many items will be displayed on the page, configured using items-per-page, with the default value being 20. The currently selected page is kept synchronised using v-model.

Pagination Example

  • <
  • 1
  • 2
  • 3
  • 4
  • 15
  • >

Variants

Inkline includes two predefined pagination styles. You can set the style of a <i-pagination> using the variant property, which can have a value of light or dark. By default, pagination uses the light variant.

Pagination Variants

  • <
  • 1
  • 2
  • 3
  • 4
  • 10
  • >

  • <
  • 1
  • 2
  • 3
  • 4
  • 10
  • >

Sizes

You're able to use the size modifier to control the size of your pagination items, using one of the available sizes: sm, md, and lg. The default size is set to md.

Pagination Sizes
  • <
  • 1
  • 2
  • 3
  • 4
  • 10
  • >

  • <
  • 1
  • 2
  • 3
  • 4
  • 10
  • >

  • <
  • 1
  • 2
  • 3
  • 4
  • 10
  • >

API

Pagination API <i-pagination>
Property Description Type Accepted Default
items Sets the total number of items to paginate. Number 0
itemsPerPage Sets the number of items per pagination entry. Number 20
limit Sets the maximum number of pagination elements to display at a time. Number n % 2 === 1 5
size Sets the size of the pagination component. String sm, md, lg md
value Sets the currently selected pagination entry. Number 1
variant Sets the color variant of the pagination component. String light, dark light