More pages

Installation

pnpm dlx kliping@latest add pagination

Usage

<script setup lang="ts">
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from '@/components/ui/pagination'
</script>

<template>
  <Pagination>
    <PaginationContent>
      <PaginationItem>
        <PaginationPrevious href="#" />
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="#">
          1
        </PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="#" is-active>
          2
        </PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="#">
          3
        </PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationEllipsis />
      </PaginationItem>
      <PaginationItem>
        <PaginationNext href="#" />
      </PaginationItem>
    </PaginationContent>
  </Pagination>
</template>

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@lucide/vue@^1.31.0, @vueuse/core@^14.4.0, reka-ui@^2.10.3
Kliping items	button
Files	components/ui/pagination/pagination.vue components/ui/pagination/pagination-content.vue components/ui/pagination/pagination-ellipsis.vue components/ui/pagination/pagination-first.vue components/ui/pagination/pagination-item.vue components/ui/pagination/pagination-last.vue components/ui/pagination/pagination-next.vue components/ui/pagination/pagination-previous.vue components/ui/pagination/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<Pagination>
  <PaginationContent>
    <PaginationPrevious />
    <PaginationItem />
    <PaginationEllipsis />
    <PaginationNext />
  </PaginationContent>
</Pagination>

Bagian lain yang tersedia: PaginationFirst, PaginationLast.

API Reference

Pagination

Prop	Type	Default	Description
page?	number	—	The controlled value of the current page. Can be binded as v-model:page.
defaultPage?	number	—	The value of the page that should be active when initially rendered. Use when you do not need to control the value state.
itemsPerPage	number	—	Number of items per page
total?	number	—	Number of items in your list
siblingCount?	number	—	Number of sibling should be shown around the current page
disabled?	boolean	—	When true, prevents the user from interacting with item
showEdges?	boolean	—	When true, always show first page, last page, and ellipsis
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Event	Payload	Description
@update:page	[value: number]	Emitted when page changes. Bind with v-model:page.

Slot	Props
#default	{ page: number; pageCount: number; }

Data attribute	Value
[data-slot]	"pagination"

PaginationContent

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	{ items: ({ type: "ellipsis"; } | { type: "page"; value: number; })[]; }

Data attribute	Value
[data-slot]	"pagination-content"

PaginationEllipsis

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"pagination-ellipsis"

PaginationFirst

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.
size?	"default" | "sm" | "xs" | "icon-xs" | "lg" | "icon" | "icon-sm" | "icon-lg"	"default"	The visual size.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"pagination-first"

PaginationItem

Prop	Type	Default	Description
value	number	—	Value for the page
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.
size?	"default" | "sm" | "xs" | "icon-xs" | "lg" | "icon" | "icon-sm" | "icon-lg"	"icon"	The visual size.
isActive?	boolean	—	Marks the current page; renders the button with the outline variant instead of ghost.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"pagination-item"

PaginationLast

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.
size?	"default" | "sm" | "xs" | "icon-xs" | "lg" | "icon" | "icon-sm" | "icon-lg"	"default"	The visual size.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"pagination-last"

PaginationNext

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.
size?	"default" | "sm" | "xs" | "icon-xs" | "lg" | "icon" | "icon-sm" | "icon-lg"	"default"	The visual size.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"pagination-next"

PaginationPrevious

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.
size?	"default" | "sm" | "xs" | "icon-xs" | "lg" | "icon" | "icon-sm" | "icon-lg"	"default"	The visual size.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"pagination-previous"

Keyboard Interactions

Perilaku keyboard-nya datang dari primitif Reka UI Pagination yang dipakai komponen ini, mengikuti pola WAI-ARIA.

Key	Description
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

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.