Radix Vue

Appearance

Pagination ​

New
Displays data in paged format and provides navigation between pages.

Features ​

  • Enable quick access to first, or last page
  • Enable to show edges constantly, or not

Installation ​

Install the component from your command line.

bash
npm install radix-vue

Anatomy ​

Import all parts and piece them together.

vue
<script setup>
import { PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev, PaginationRoot } from 'radix-vue'
</script>

<template>
  <PaginationRoot>
    <PaginationList v-slot="{ items }">
      <PaginationFirst />
      <PaginationPrev />
      <template v-for="(page, index) in items">
        <PaginationListItem v-if="page.type === 'page'" :key="index" />
        <PaginationEllipsis v-else :key="page.type" :index="index">
          &#8230;
        </PaginationEllipsis>
      </template>
      <PaginationNext />
      <PaginationLast />
    </PaginationList>
  </PaginationRoot>
</template>

API Reference ​

Root ​

Contains all of the paginations parts.

PropTypeDefault
page
number
defaultPage
number
1
total
number
10
itemsPerPage
number
10
siblingCount
number
3
showEdges
boolean
EmitType
@update:page
(value: number) => void

List ​

Used to show the list of pages. It also makes pagination accessible to assistive technologies.

PropTypeDefault
asChild
boolean
false

Item ​

Used to render the button that changes the current page.

PropTypeDefault
value
number
asChild
boolean
false
Data AttributeValue
[data-selected]"true" | ""
[data-type]"page"

Ellipsis ​

Placeholder element when the list is long, and only a small amount of siblingCount was set and showEdges was set to true.

PropTypeDefault
asChild
boolean
false
Data AttributeValue
[data-type]"ellipsis"

First ​

Triggers that set the page value to 1

PropTypeDefault
asChild
boolean
false

Prev ​

Triggers that set the page value to the previous page

PropTypeDefault
asChild
boolean
false

Next ​

Triggers that set the page value to the next page

PropTypeDefault
asChild
boolean
false

Last ​

Triggers that set the page value to the last page

PropTypeDefault
asChild
boolean
false

Keyboard Interactions ​

KeyDescription
Tab
Moves focus to the next focusable element.
Space
When focus is on a any trigger, trigger selected page or arrow navigation
Enter
When focus is on a any trigger, trigger selected page or arrow navigation