分页

分页组件可用于显示当前激活页面并在多个页面之间导航。

安装

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

导入

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

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

用法

禁用状态

尺寸

颜色

变体

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

带控制按钮

您可以将 showControls 设置为 true 来显示“下一页”和“上一页”按钮。

分页循环

如果您希望分页能够循环，可以将 loop 属性设置为 true。 当光标到达最后一页时会回到第一页，反之亦然。

更改初始页面

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

紧凑分页

您可以将 isCompact 属性设置为 true 来显示精简版的分页。

带阴影

您可以使用 showShadow 属性来在当前激活的页面项下方显示阴影。

受控模式

相邻页数

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

边界页数

您可以通过设置 boundaries 属性来控制分页开头和结尾显示的页数。

自定义项

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

插槽

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

自定义样式

您可以通过向组件插槽传递自定义的 Tailwind CSS 类来定制 Pagination 组件。

自定义实现

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

数据属性

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

• data-controls: 指示分页是否有控制按钮。基于 showControls 属性。
• data-loop: 当分页循环时。基于 loop 属性。
• data-dots-jump: 指示分页是否有省略号跳转。基于 dotsJump 属性。
• data-total: 总页数。基于 total 属性。
• data-active-page: 激活的页面。基于 activePage 属性。

无障碍访问

• 根节点默认具有 navigation 角色。
• 分页项具有一个 aria-label，用于标识项的用途（“下一页按钮”、“上一页按钮”等），您可以通过 getItemAriaLabel 函数覆盖此标签。
• 分页项位于 Tab 键顺序中，tabindex 为“0”。

API

Pagination 属性

Pagination 事件

类型

Pagination Item 属性