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
  • >

Limit

You're able to use the limit modifier to control how many items to show besides the first and last items, including the two ellipsis pagination items.

Make sure this value is an odd number for best results.

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

To make things even better, you can responsively control the number of items at each breakpoint, to make sure your design always looks great.

Pagination Responsive Limit
  • <
  • 1
  • 2
  • 3
  • 4
  • 10
  • >

You're able to use the quickLink modifier to allow the user to click the item to quickly jump through pages, a number of items equal to limit at a time.

Pagination Quick Link
  • <
  • 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, Object n % 2 === 1 { xs: 3, sm: 5 }
quickLink Enables pagination quick links. Boolean true, false false
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