分页

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,

仅图标

只使用上一页和下一页按钮，不显示页码。适用于带有每页行数选择器的数据表。

Rows per page

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，以自动为您完成此操作。

导航菜单 Navigation Menu 弹出框

安装使用方法示例简单仅图标 Next.js