Pagination

页码显示为一排小斜切块，像 Tabs 一样彼此嵌合；当前页填充强调色。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/pagination

示例

十二页

pagination-basic.tsx

import { useState } from "react";import {  Pagination,  PaginationContent,  PaginationEllipsis,  PaginationItem,  PaginationLink,  PaginationNext,  PaginationPrevious,} from "@/components/zero/pagination";const last = 12;export default function PaginationBasic() {  const [page, setPage] = useState(3);  const go = (to: number) => (event: React.MouseEvent) => {    event.preventDefault();    setPage(Math.min(last, Math.max(1, to)));  };  const shown = [1, page - 1, page, page + 1, last].filter(    (n, index, all) => n >= 1 && n <= last && all.indexOf(n) === index,  );  return (    <Pagination>      <PaginationContent>        <PaginationItem>          <PaginationPrevious href="#" onClick={go(page - 1)} />        </PaginationItem>        {shown.map((n, index) => (          <PaginationItem key={n} className="flex items-center gap-1">            {index > 0 && n - shown[index - 1] > 1 ? (              <PaginationEllipsis />            ) : null}            <PaginationLink href="#" isActive={n === page} onClick={go(n)}>              {n}            </PaginationLink>          </PaginationItem>        ))}        <PaginationItem>          <PaginationNext href="#" onClick={go(page + 1)} />        </PaginationItem>      </PaginationContent>    </Pagination>  );}

行为

其余页码不填充，指针悬停时变亮。「上一页」「下一页」带箭头和文字，在手机上隐藏文字。显示哪些页码由使用方决定，被跳过的页码用 PaginationEllipsis 代替。

链接默认渲染为 a 元素；可通过 render 换成路由库的链接组件。

属性

PaginationLink

属性	类型	默认值	说明
isActive	boolean	false	当前页：填充强调色，并带有 aria-current="page"。
render	ReactElement	—	改为渲染的元素，例如路由库的链接组件。

PaginationPrevious, PaginationNext

属性	类型	默认值	说明
children	ReactNode	"Previous" / "Next"	箭头旁的文字。

Pagination, PaginationContent, PaginationItem, PaginationEllipsis

PaginationEllipsis

属性	类型	默认值	说明
label	string	"More pages"	读屏软件为省略的页码读出的文字。