113k
New

分页

PreviousNext

带有页面导航、下一页和上一页链接的分页。

Radix UIBase UI
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>
)

RTL

要启用 shadcn/ui 中的 RTL 支持，请参阅 RTL 配置指南。

"use client"

import * as React from "react"

更新日志

RTL 支持

如果你从之前的 Pagination 组件版本升级，你需要应用以下更新来添加 text 属性：

更新 PaginationPrevious。

  function PaginationPrevious({
    className,
+   text = "Previous",
    ...props
- }: React.ComponentProps<typeof PaginationLink>) {
+ }: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
    return (
      <PaginationLink
        aria-label="Go to previous page"
        size="default"
        className={cn("cn-pagination-previous", className)}
        {...props}
      >
        <ChevronLeftIcon />
        <span className="cn-pagination-previous-text hidden sm:block">
-         Previous
+         {text}
        </span>
      </PaginationLink>
    )
  }

更新 PaginationNext。

  function PaginationNext({
    className,
+   text = "Next",
    ...props
- }: React.ComponentProps<typeof PaginationLink>) {
+ }: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
    return (
      <PaginationLink
        aria-label="Go to next page"
        size="default"
        className={cn("cn-pagination-next", className)}
        {...props}
      >
-       <span className="cn-pagination-next-text hidden sm:block">Next</span>
+       <span className="cn-pagination-next-text hidden sm:block">{text}</span>
        <ChevronRightIcon />
      </PaginationLink>
    )
  }