分页

分页组件允许您显示当前页并在多个页面之间导航。

安装

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

导入

NextUI 导出 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：向右箭头图标插槽。

自定义样式

您可以通过将自定义 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 的角色。
• 分页项具有标识项目用途的 aria-label（“下一页按钮”、“上一页按钮”等），您可以使用 getItemAriaLabel 函数来覆盖此标签。
• 分页项按照标签顺序排列，tabindex 为 “0”。

API

分页属性

分页事件

类型

分页项属性