Components
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>示例
简单
一个只包含页码的简单分页。
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 进行更新，以便自动为你完成此操作。