Pagination

用于在拆分为多页的列表或集合中导航。

预览

当前页与相邻页

在示例内切换第 1 至 3 页，查看当前页及前后按钮的边界状态，无需离开示例。

安装

npx shadcn@latest add @neumorphism-ui/pagination

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

Registry JSON

用法

在 PaginationContent 和 PaginationItem 内放置页面链接。提供真实目标地址，用 isActive 标记当前页，用省略号表示未展示的页码。

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

export default function Example() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem><PaginationPrevious href="?page=1" /></PaginationItem>
        <PaginationItem><PaginationLink href="?page=1">1</PaginationLink></PaginationItem>
        <PaginationItem><PaginationLink href="?page=2" isActive>2</PaginationLink></PaginationItem>
        <PaginationItem><PaginationNext href="?page=3" /></PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

API 参考

保留 nav、ul、li、anchor 语义的组合式分页导航。支持当前页、上一页和下一页链接，以及省略项。

组件	属性	类型	默认值	说明
`Pagination`	`aria-label`	`string`	`"pagination"`	为 pagination navigation 区域提供无障碍名称。
`PaginationLink`	`href`必填	`string`	`—`	目标页面的实际 URL。
`PaginationLink`	`isActive`	`boolean`	`false`	设置当前页样式和 aria-current=page。
`PaginationPrevious / PaginationNext`	`children`	`React.ReactNode`	`"Previous" / "Next"`	替换默认的翻页文案。

预览

当前页与相邻页

安装

用法

API 参考

无障碍