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


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


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


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

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

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

Component API

Here you can find a list of the various customization options you can use for the pagination component as props, as well as available slots and events.

Pagination API

Sass Variables

Here you can find a list of the Sass variables you can use for the pagination components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.