Atelier UI

搜索组件…

搜索组件…

Pagination

分页器:智能省略、首尾页按钮、每页条数选择和结果统计。

在沙盒中编辑

复制一段给 AI 编程工具的提示词,包含源码、依赖和用法

属性

PaginationProps

同时支持以下类型的全部属性: Omit<React.ComponentProps<"nav">, "onChange">

属性类型默认值说明
totalItems* 必填number——
pagenumber——
defaultPagenumber——
onPageChange(page: number) => void——
pageSizenumber——
defaultPageSizenumber——
pageSizeOptionsnumber[]—Show a page-size select when non-empty
onPageSizeChange(size: number) => void——
siblingCountnumber—Pages shown on each side of the current page
showFirstLastboolean——
showSummaryboolean—"Showing 1–10 of 240" summary text
variant"outline" | "ghost"——

安装

$ npx shadcn@latest add https://chromotion.dev/r/pagination.json

命令行安装的是基础组件,定制的参数写在「定制」标签页生成的代码里。

同类组件