Pagination · Radix UI

带页码、上一页与下一页的分页；当前页描边会在页码之间滑动。

安装

Radix UI 的原语保持上游 API 不变，安装只需要三步：加包、加组件、把 import 换掉。

终端

bun add @animate-ui/react motion
bunx shadcn@latest add pagination
bunx @animate-ui/cli@latest animate pagination

用法

从 Animate UI 引入原语，其余结构、属性与 data 属性都保持 Radix UI 的写法。也可以按子路径单独引入：

tsx

import { Pagination } from '@animate-ui/react/primitives/radix-ui';

pagination.tsx

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from '@/components/ui/pagination';

export function Pages() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" isActive>
            2
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

动效

一块表面以 stiffness 300 / damping 30 的弹簧从旧页滑向新页，位移在合成层完成。
表面复制当前链接的类名与 data 属性，边框、背景、圆角与阴影随主题；当前页请用 data-active 或变体样式标记。

所有时长都会乘以 AnimateUIProvider 的 tempo，并遵守系统的减少动效设置。

API

动效相关的 transition 与 exitTransition 是 Animate UI 唯一新增的属性；其余 props 与 Radix UI 完全一致。

属性	类型	默认值
transition	`Transition`	`{ type: 'spring', stiffness: 300, damping: 30 }`

未列出的属性与上游 API 完全一致，可在官方文档查阅。