Components
@shadcn/react
@shadcn/helpers
Utilities
import {
Pagination,
PaginationContent,安装#
pnpm dlx shadcn@latest add pagination
使用方法#
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination"<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>组合#
使用以下组合构建一个 Pagination：
分页
└── 分页内容
├── 分页项
│ └── 上一页
├── 分页项
│ └── 分页链接
├── 分页项
│ └── 分页省略号
└── 分页项
└── 下一页简单#
一个仅带页码的简单分页。
import {
Pagination,
PaginationContent,仅图标#
只使用上一页和下一页按钮，不显示页码。适用于带有每页行数选择器的数据表。
import { Field, FieldLabel } from "@/components/ui/field"
import {
Pagination,Next.js#
默认情况下，<PaginationLink /> 组件将渲染 <a /> 标签。
如需使用 Next.js 的 <Link /> 组件，请对 pagination.tsx 做如下更新。
+ import Link from "next/link"
- type PaginationLinkProps = ... & React.ComponentProps<"a">
+ type PaginationLinkProps = ... & React.ComponentProps<typeof Link>
const PaginationLink = ({...props }: ) => (
<PaginationItem>
- <a>
+ <Link>
// ...
- </a>
+ </Link>
</PaginationItem>
)
注意： 我们正在更新 CLI，以自动为您完成此操作。