前端UI组件设计系统【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址https://gitcode.com/gh_mirrors/ant/ant-design点击查看免费下载导读本文聚焦 Ant Designantd中用于分隔长列表的Pagination分页组件围绕其官方文档 components/pagination/index.en-US.md 展开系统讲解它的适用场景、全部 API 属性、受控与非受控用法、以及底层基于 rc-pagination 的实现原理与 Design Token 定制方式。读完本文你将掌握分页组件从基础接入、尺寸/对齐/响应式调节、快速跳转、每页条数切换、总数展示到自定义页码渲染SEO 友好的完整实战方案并能通过源码理解其内部工作机制。何时使用 Pagination根据官方文档分页组件适用于以下两类典型场景当加载/渲染所有数据需要花费很长时间时分页可以避免一次性渲染海量 DOM 节点显著降低首屏开销与渲染卡顿当用户希望通过翻页浏览数据时通过页码切换、上一页/下一页、快速跳转等方式按页获取与浏览数据。与加载更多或无限滚动不同分页是一种确定性导航模式天然适合需要明确页码、可收藏/可分享 URL 的业务场景如表格、列表、搜索结果页。基础用法与最小示例最简单的接入方式只需一个total属性如 demo/basic.tsximport React from react; import { Pagination } from antd; const App: React.FC () Pagination defaultCurrent{1} total{50} /; export default App;官方文档给出的最简写法是Pagination onChange{onChange} total{50} /total表示数据总条数默认值为0defaultCurrent为默认的当前页码默认值为1。当total为 50、每页默认 10 条时分页器会自动渲染出 5 个页码。受控与非受控Pagination同时支持受控与非受控两种模式。非受控模式由组件内部维护页码状态只需设置defaultCurrent受控模式则由业务方持有current并通过onChange同步更新如 demo/controlled.tsximport React, { useState } from react; import type { PaginationProps } from antd; import { Pagination } from antd; const App: React.FC () { const [current, setCurrent] useState(3); const onChange: PaginationProps[onChange] (page) { console.log(page); setCurrent(page); }; return Pagination current{current} onChange{onChange} total{50} /; };onChange的签名是function(page, pageSize)当页码或每页条数改变时被调用两个参数分别是改变后的页码与每页条数。与之配套的onShowSizeChange则是function(current, size)仅在pageSize改变时触发。API 属性全景解析以下是官方文档 index.en-US.md 中的完整属性表结合源码注释补充了取值范围与默认值说明属性说明类型默认值align对齐方式start|center|end-current当前页数受控number-defaultCurrent默认的当前页数number1defaultPageSize默认的每页条数number10disabled禁用分页boolean-hideOnSinglePage只有一页时是否隐藏分页器booleanfalseitemRender自定义页码结构可用于优化 SEO(page, type: page \| prev \| next, originalElement) React.ReactNode-pageSize每页条数受控number-pageSizeOptions指定每页可以显示多少条string[]|number[][10, 20, 50, 100]responsive当size未指定时根据屏幕宽度自动调整尺寸boolean-showLessItems是否显示较少页面内容booleanfalseshowQuickJumper是否可以快速跳转至某页boolean|{ goButton: ReactNode }falseshowSizeChanger是否展示pageSize切换器当total大于 50 时默认为 trueboolean-showTitle是否显示原生 tooltip 页码提示booleantrueshowTotal用于显示数据总量和当前数据顺序function(total, range)-simple当添加该属性时显示为简单分页boolean|{ readOnly?: boolean }-size当为small时是小尺寸分页default|smalldefaulttotal数据总数number0onChange页码或pageSize改变的回调function(page, pageSize)-onShowSizeChangepageSize 变化的回调function(current, size)-通用属性如className、style、prefixCls等参考 通用属性文档。属性背后的源码实现从 Pagination.tsx 可以看到PaginationProps是在rc-pagination的PaginationProps基础上扩展的额外补充了showQuickJumper支持{ goButton?: React.ReactNode }对象形态、size、responsive、role、totalBoundaryShowSizeChanger与rootClassName等属性最终将 props 透传给底层RcPagination组件见 Pagination.tsx。这意味着 antd 的分页组件保留了 rc-pagination 的全部能力同时在其上层封装了主题、国际化、尺寸上下文与响应式断点逻辑。值得关注的两个内部处理点响应式尺寸useBreakpoint(responsive)会在开启responsive时监听屏幕宽度源码位于 Pagination.tsx当视口处于xs断点时强制应用小尺寸样式Pagination.tsxpageSize 切换器showSizeChanger会与ConfigProvider中配置的pagination.showSizeChanger合并Pagination.tsx小尺寸时自动替换为MiniSelect、默认使用MiddleSelectPagination.tsx切换器选项实现在 Select.tsx。实战场景详解1. 尺寸、对齐与响应式size设置为small时渲染小尺寸分页视觉更紧凑align通过start/center/end控制分页器在容器内的对齐方式对应样式类-start、-center、-end其justify-content定义在 style/index.tsresponsive不指定size时组件会根据窗口宽度在小尺寸与默认尺寸之间自适应切换。2. 每页条数切换Size Changer参考 demo/changer.tsxconst onShowSizeChange: PaginationProps[onShowSizeChange] (current, pageSize) { console.log(current, pageSize); }; const App: React.FC () ( Pagination showSizeChanger onShowSizeChange{onShowSizeChange} defaultCurrent{3} total{500} / );要点showSizeChanger默认在total 50时自动为 true可选的每页条数由pageSizeOptions控制默认是[10, 20, 50, 100]可传入number[]或string[]自定义。3. 快速跳转Quick Jumper参考 demo/jump.tsxconst onChange: PaginationProps[onChange] (pageNumber) { console.log(Page: , pageNumber); }; const App: React.FC () ( Pagination showQuickJumper defaultCurrent{2} total{500} onChange{onChange} / br / Pagination showQuickJumper defaultCurrent{2} total{500} onChange{onChange} disabled / / );showQuickJumper接受布尔值或{ goButton: ReactNode }对象后者可自定义跳转按钮内容如跳转文字或图标。跳转输入框的宽度、边距与焦点样式由 style/index.ts 定义复用了 Input 的基础样式genBasicInputStyle与genBaseOutlinedStyle。4. 简单模式Simple参考 demo/simple.tsxconst App: React.FC () ( Pagination simple defaultCurrent{2} total{50} / br / Pagination simple{{ readOnly: true }} defaultCurrent{2} total{50} / br / Pagination disabled simple defaultCurrent{2} total{50} / / );simple模式只保留上一页 / 当前页输入框 / 下一页三段式结构传入{ readOnly: true }时输入框变为只读。简单模式下页码输入框的聚焦边框、悬停高亮等样式在 style/index.ts 中专门生成。5. 显示总数Total参考 demo/total.tsxconst App: React.FC () ( Pagination total{85} showTotal{(total) Total ${total} items} defaultPageSize{20} defaultCurrent{1} / br / Pagination total{85} showTotal{(total, range) ${range[0]}-${range[1]} of ${total} items} defaultPageSize{20} defaultCurrent{1} / / );showTotal接收两个参数total为数据总条数range为当前页展示的数据区间[起始条数, 结束条数]可自由拼接展示文案。6. 自定义页码渲染itemRender 与 SEO参考 demo/itemRender.tsxconst itemRender: PaginationProps[itemRender] (_, type, originalElement) { if (type prev) { return aPrevious/a; } if (type next) { return aNext/a; } return originalElement; }; const App: React.FC () Pagination total{500} itemRender{itemRender} /;itemRender回调接收(page, type, originalElement)三个参数其中type为page | prev | next返回值会替换默认的页码/箭头元素。中文文档特别注明此属性可用于优化 SEO——即你可以将页码渲染为带href的a链接方便搜索引擎抓取分页 URL。其他常见组合还包括showLessItems在大数据量下渲染更少的页码项配合省略号•••使用hideOnSinglePage当只有一页时整体隐藏分页器showTitle控制是否显示页码的原生 tooltip 提示默认truedisabled整组分页禁用禁用态样式cursor: not-allowed、禁用背景与文字色定义在 style/index.ts。更多示例与调试模式官方文档的 Examples 区还提供了以下可在 components/pagination/demo 中查看源码的演示basic基础用法basic.tsxalignstart / center / end 三种对齐方式more大数据量下的省略号页码changer每页条数切换changer.tsxjump快速跳转jump.tsxmini小尺寸分页simple简单模式simple.tsxcontrolled受控用法controlled.tsxtotal总数与区间展示total.tsxall全部页码展示itemRender自定义上一页/下一页itemRender.tsxwireframedebug线框风格依赖token.wireframe对应 style/bordered.ts 中的BorderedStylecomponent-tokendebug组件 Token 定制演示。在仓库中code src./demo/xxx.tsx这类指令由文档站点构建时解析为可运行的演示同时配套有对应的xxx.md文件如 basic.md承载示例说明文字。此外design 目录下的设计稿演示与 index.$tab-design.zh-CN.md 展示了更贴近业务场景的分页设计模式。Design Token主题定制分页组件的 Design Token 定义在 style/index.ts 的ComponentToken接口中包括Token说明itemBg页码选项背景色itemSize页码尺寸itemActiveBg页码激活态背景色itemSizeSM小号页码尺寸itemLinkBg页码链接背景色itemActiveBgDisabled页码激活态禁用状态背景色itemActiveColorDisabled页码激活态禁用状态文字颜色itemInputBg输入框背景色miniOptionsSizeChangerTop每页展示数量选择器 top 偏移其默认值由prepareComponentToken生成style/index.ts多数 token 直接映射自全局设计变量例如itemSize默认取controlHeight、itemActiveBg默认取colorBgContainer。开发者可通过ConfigProvider的theme.components.Pagination覆盖这些 token实现品牌化定制PaginationToken还从 Input 组件合并了输入框相关 token见initInputToken保证快速跳转输入框与全局输入框风格一致。样式生成的完整链路为genStyleHooks(Pagination, ...)→prepareToken合并全局与组件 token→ 各样式生成函数genPaginationStyle/genPaginationFocusStyle涵盖页码项、跳转按钮、省略号、简单模式、迷你模式、禁用态、响应式媒体查询与 RTL 方向适配最终通过 cssinjs 在运行时注入样式。底层机制与测试保障从实现层面看antd 的Pagination是 rc-pagination 的封装antd 负责注入图标上一页/下一页/跳转按钮含 RTL 方向自动翻转见 Pagination.tsx、国际化文案通过useLocale(Pagination, enUS)Pagination.tsx、尺寸上下文useSize与样式系统而页码计算、省略号折叠等核心逻辑由 rc-pagination 完成。仓库中的测试用例覆盖了主要行为tests/index.test.tsx 验证受控/非受控、回调触发与渲染快照tests/simple.test.tsx 专门覆盖简单模式tests/demo.test.tsx 保证每个 demo 可正常渲染。如果你要基于当前仓库本地运行这些测试可在仓库根目录执行npm test -- components/pagination需先npm install。总结Pagination是 antd 导航组件家族中高频使用的一员凭借对 rc-pagination 的深度封装它同时具备了开箱即用的默认行为与高度可定制的扩展点totalonChange即可完成最小接入showSizeChanger、showQuickJumper、showTotal、simple、align、responsive等属性覆盖了绝大多数业务形态itemRender支持输出语义化链接以利于 SEODesign Token 则让主题定制落到像素级。建议在项目中使用受控模式并配合服务端数据源将onChange中的page与pageSize映射到接口查询参数即可构建稳定、可维护的分页数据流。赞分享前端UI组件设计系统【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址https://gitcode.com/gh_mirrors/ant/ant-design点击查看免费下载相关推荐Ant Design Pagination 分页组件完全指南API 配置、源码解析与实战演示Ant Design Pagination 分页组件完全指南API 配置、源码解析与实战演示 导读 分页器Pagination是 Ant Design 中前端UI组件设计系统ant-design-vue Pagination 分页组件全解析API、事件与源码实现原理ant design vue Pagination 分页组件全解析API、事件与源码实现原理 分页Pagination是列表类页面最常用的导航组件之一a前端UI组件设计系统如何用 Tensor.from_blob 实现 PyTorch CUDA 张量与 tinygrad 零拷贝互操作如何用 Tensor.from_blob 实现 PyTorch CUDA 张量与 tinygrad 零拷贝互操作 如果你的工作负载里 PyTorch 和 tin前端UI组件设计系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考