分页

分页组件允许你展示当前页码并在多个页面之间导航。

安装

以上命令仅用于单独安装。如果已全局安装 @heroui/react，则可以跳过此步骤。

导入

HeroUI 导出 3 个与分页相关的组件

• Pagination：用于显示分页的主组件。
• PaginationItem：用于显示分页项的内部组件。
• PaginationCursor：用于显示当前页面的内部项组件。

使用

禁用

尺寸

颜色

变体

你可以使用 variant 属性来更改分页项的样式。

带控件

你可以设置 showControls 为 true 以显示“next”和“previous”按钮。

分页循环

如果你想循环分页，可以将 loop 属性设置为 true。当光标到达最后一页时，它将返回到第一页，反之亦然。

更改初始页码

你可以通过设置 initialPage 属性来更改初始页码。

紧凑型分页

你可以设置 isCompact 属性为 true 以显示分页的精简版本。

带阴影

你可以使用 showShadow 属性来显示活动页码项下方的阴影。

受控

兄弟页码

你可以通过设置 siblings 属性来控制当前页码前后显示的页码数量。

边界页码

你可以通过设置 boundaries 属性来控制分页开始和结束时显示的页码数量。

自定义项

你可以使用 renderItem 属性来自定义分页项。

插槽

• base：主分页插槽。
• wrapper：分页包装器插槽。它包裹分页项。
• prev：上一页按钮插槽。
• next：下一页按钮插槽。
• item：分页项插槽，应用于中间项。
• cursor：当前页码插槽。仅当 disableCursorAnimation 为 false 且 disableAnimation 为 false 时可用。
• forwardIcon：前进图标插槽。当鼠标悬停在省略号按钮上时出现。
• ellipsis：省略号插槽。
• chevronNext：Chevron 下一页图标插槽。

自定义样式

你可以通过将自定义 Tailwind CSS 类传递给组件插槽来自定义 Pagination 组件。

自定义实现

如果需要进一步自定义分页，可以使用 usePagination Hook 来创建你自己的实现。

数据属性

Pagination 在 base 元素上具有以下属性

• data-controls: 指示分页是否具有控件。基于 showControls 属性。
• data-loop: 当分页循环时。基于 loop 属性。
• data-dots-jump: 指示分页是否具有跳跃点。基于 dotsJump 属性。
• data-total: 总页数。基于 total 属性。
• data-active-page: 当前激活的页码。基于 activePage 属性。

无障碍访问

• 根节点默认具有 navigation 的 role 属性。
• 分页项目具有识别项目用途的 aria-label （“下一页按钮”，“上一页按钮”等），您可以使用 getItemAriaLabel 函数来覆盖此标签。
• 分页项目在 Tab 键顺序中，tabindex 值为 "0"。

API

分页 Props

分页事件

类型

分页 Item Props