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.

<i-pagination v-model="page" :items-total="itemsTotal" :items-per-page="itemsPerPage" />

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.

<i-pagination v-model="page" :items-total="itemsTotal" :items-per-page="itemsPerPage" color="light" />

<i-pagination v-model="page" :items-total="itemsTotal" :items-per-page="itemsPerPage" color="dark" />

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.

<i-pagination v-model="page" :items-total="itemsTotal" :items-per-page="itemsPerPage" size="sm" />

<i-pagination v-model="page" :items-total="itemsTotal" :items-per-page="itemsPerPage" size="md" />

<i-pagination v-model="page" :items-total="itemsTotal" :items-per-page="itemsPerPage" size="lg" />

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.

<i-pagination v-model="page" :limit="3" :items-total="itemsTotal" :items-per-page="itemsPerPage" />

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

<i-pagination v-model="page" :limit="limitResponsive" :items-total="itemsTotal" :items-per-page="itemsPerPage" />

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.

<i-pagination v-model="page" quick-link :items-total="itemsTotal" :items-per-page="itemsPerPage" />

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