Pagination
Pagination provides navigation for large series of related content.
Basic Example
Pagination items are automatically generated based on the items-total
and the items-per-page
properties. The currently selected page is accessible using v-model
.
Color Variants
Inkline comes with two predefined pagination styles. You can set the color style of the <i-pagination>
component using the color
property, which can be light
or dark
. By default, pagination uses the light
color.
Size Variants
You’re able to use the size
property 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
.
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
to have the active item centered.
To make things even better, you can responsively control the number of items at each breakpoint, to make sure your design always looks great.
Quick Links
You’re able to use the quickLink
property to allow the user to click the …
item to quickly jump through pages, a number of items equal to limit
at a time.
Configuration
Props
Use props to modify the component’s design and behavior.
- Property
ariaLabel
TypeString
DefaultPagination
Description The aria-label of the pagination - Property
color
Type'light' | 'dark'
Default'light'
Description The color variant of the pagination - Property
itemsPerPage
TypeNumber
Default20
Description The number of items per page to be displayed - Property
itemsTotal
TypeNumber
Default0
Description The total number of items - Property
limit
TypeNumber | Object
Default''
Description The maximum number of pagination buttons to show on each breakpoint - Property
quickLink
TypeBoolean
Defaultfalse
Description Display the quick link buttons - Property
modelValue
TypeNumber
Default1
Description Used to determine the current page - Property
size
Type'sm' | 'md' | 'lg'
Default'md'
Description The size variant of the pagination
Slots
Use slots to insert custom content into well-defined component locations.
- Property
previous
Description Slot for previous button content - Property
next
Description Slot for next button content
Events
Use events to react to something happening inside the component.
- Property
update:modelValue
Description Event emitted for setting the modelValue
CSS Variables
Read more about configuring Inkline’s Design System variables to update the look and feel of the component.
- Property
----background
Valuecolor('light')
Description The background of the pagination component item - Property
----background--hover
Valuecolor('light-55')
Description The background of the pagination component item when hovered or focused - Property
----background--active
Valuecolor('primary')
Description The background of the pagination component item when active - Property
----border-top-color
Valuecolor('light-55')
Description The border top color of the pagination component item - Property
----border-right-color
Valuecolor('light-55')
Description The border right color of the pagination component item - Property
----border-bottom-color
Valuecolor('light-55')
Description The border bottom color of the pagination component item - Property
----border-left-color
Valuecolor('light-55')
Description The border left color of the pagination component item - Property
----border-color
Valuevar(----border-top-color) var(----border-right-color) var(----border-bottom-color) var(----border-left-color)
Description The border color of the pagination component item - Property
----border-color--active
Valuecolor('primary-55')
Description The border color of the pagination component item when active - Property
----border-style
Valuevar(--border-style)
Description The border style of the pagination component - Property
----border-top-width
Valuevar(--border-top-width)
Description The border top width of the pagination component - Property
----border-right-width
Valuevar(--border-right-width)
Description The border right width of the pagination component - Property
----border-bottom-width
Valuevar(--border-bottom-width)
Description The border bottom width of the pagination component - Property
----border-left-width
Valuevar(--border-left-width)
Description The border left width of the pagination component - Property
----border-width
Valuevar(----border-top-width) var(----border-right-width) var(----border-bottom-width) var(----border-left-width)
Description The border width of the pagination component - Property
----border-top-left-radius
Valuevar(--border-top-left-radius)
Description The border top left radius of the pagination component - Property
----border-top-right-radius
Valuevar(--border-top-right-radius)
Description The border top right radius of the pagination component - Property
----border-bottom-right-radius
Valuevar(--border-bottom-right-radius)
Description The border bottom right radius of the pagination component - Property
----border-bottom-left-radius
Valuevar(--border-bottom-left-radius)
Description The border bottom left radius of the pagination component - Property
----border-radius
Valuevar(----border-top-left-radius) var(----border-top-right-radius) var(----border-bottom-right-radius) var(----border-bottom-left-radius)
Description The border radius of the pagination component - Property
----box-shadow-offset-x
Valuevar(--box-shadow-offset-x)
Description The box shadow horizontal offset of the pagination component - Property
----box-shadow-offset-y
Valuevar(--box-shadow-offset-y)
Description The box shadow vertical offset of the pagination component - Property
----box-shadow-blur-radius
Valuevar(--box-shadow-blur-radius)
Description The box shadow blur radius of the pagination component - Property
----box-shadow-spread-radius
Valuevar(--box-shadow-spread-radius)
Description The box shadow spread radius of the pagination component - Property
----box-shadow-color
Valuevar(--box-shadow-color)
Description The box shadow spread radius of the pagination component - Property
----box-shadow
Valuevar(----box-shadow-offset-x) var(----box-shadow-offset-y) var(----box-shadow-blur-radius) var(----box-shadow-spread-radius) var(----box-shadow-color)
Description The box shadow of the pagination component - Property
----color
Valuecontrast-color($color-light)
Description The border color of the pagination component item when active - Property
----color--active
Valuecontrast-color($color-primary)
Description The border color of the pagination component item when active - Property
----font-size
Valuefont-size()
Description The font size of the pagination component - Property
----margin-top
Value0
Description The margin top of the pagination component - Property
----margin-right
Valuecalc(var(--margin-right) / 4)
Description The margin right of the pagination component - Property
----margin-bottom
Value0
Description The margin bottom of the pagination component - Property
----margin-left
Valuecalc(var(--margin-left) / 4)
Description The margin left of the pagination component - Property
----margin
Valuevar(----margin-top) var(----margin-right) var(----margin-bottom) var(----margin-left)
Description The margin of the pagination component - Property
----min-width
Value40px
Description The minimum width of the pagination component items - Property
----opacity--disabled
Value0.85
Description The opacity of the pagination component when disabled - Property
----padding-top
Valuecalc(var(--padding-top) / 2)
Description The padding top of the pagination component - Property
----padding-right
Valuecalc(var(--padding-right) / 2)
Description The padding right of the pagination component - Property
----padding-bottom
Valuecalc(var(--padding-bottom) / 2)
Description The padding bottom of the pagination component - Property
----padding-left
Valuecalc(var(--padding-left) / 2)
Description The padding left of the pagination component - Property
----padding
Valuevar(----padding-top) var(----padding-right) var(----padding-bottom) var(----padding-left)
Description The padding of the pagination component