导航与展开@neumorphism-ui/pagination

Pagination

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

@neumorphism-ui/pagination

Registry JSON

预览

安装

npx shadcn@latest add @neumorphism-ui/pagination

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置。

用法

Import

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

Example

<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><PaginationEllipsis /></PaginationItem>
    <PaginationItem>
      <PaginationNext href="?page=3" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

API 参考

组件	属性	类型	默认值	说明
`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"`	替换默认的翻页文案。

预览

安装

用法

Import

Example

API 参考

无障碍