分页

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

分页属性

属性	类型	描述	默认值
变体	`flat` \| `bordered` \| `light` \| `faded`	分页变体。	`flat`
颜色	`default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`	分页颜色主题。	`default`
尺寸	`sm` \| `md` \| `lg`	分页尺寸。	`md`
圆角	`none` \| `sm` \| `md` \| `lg` \| `full`	分页边框圆角。	`xl`
总页数	`页码`	总页数。	`1`
dotsJump	`页码`	在“...”按钮上添加或减去的页数。	`5`
initialPage	`页码`	初始页码。（非受控）	`1`
page	`页码`	当前页码。（受控）	-
siblings	`页码`	在当前页码前后显示的页数。	`1`
boundaries	`页码`	在分页开始和结束处显示的页数。	`1`
loop	`boolean`	分页是否循环。	`false`
isCompact	`boolean`	分页是否采用紧凑样式。	`false`
isDisabled	`boolean`	分页是否禁用。	`false`
showShadow	`boolean`	分页光标是否显示阴影。	`false`
showControls	`boolean`	分页是否显示控件。	`false`
disableCursorAnimation	`boolean`	分页光标是否隐藏。	`false`
renderItem	PaginationItemProps	分页项渲染函数。	-
getItemAriaLabel	`(page: string) => string`	允许自定义分页项 aria-label 的函数。	-
disableAnimation	`boolean`	分页光标是否动画。	`false`
classNames	`Record<"base"｜ "wrapper" ｜ "prev"｜ "next" ｜ "item" ｜ "cursor" ｜ "forwardIcon" ｜ "ellipsis" ｜ "chevronNext", string>`	允许为分页插槽设置自定义类名。	-

分页事件

属性	类型	描述
onChange	`(page: number) => void`	分页活动页码更改时调用的处理程序。

类型

分页项属性

export type PaginationItemRenderProps = {
  // The pagination item ref.
  ref?: Ref<T>;
  // The pagination item value.
  value: PaginationItemValue;
  // The pagination item index.
  index: number;
  // The active page number.
  activePage: number;
  // Whether the pagination item is active.
  isActive: boolean;
  // Whether the pagination item is the first item in the pagination.
  isFirst: boolean;
  // Whether the pagination item is the last item in the pagination.
  isLast: boolean;
  // Whether the pagination item is the next item in the pagination.
  isNext: boolean;
  // Whether the pagination item is the previous item in the pagination.
  isPrevious: boolean;
  // The pagination item className.
  className: string;
  // Callback to go to the next page.
  onNext: () => void;
  // Callback to go to the previous page.
  onPrevious: () => void;
  // Callback to go to the page.
  setPage: (page: number) => void;
};

type renderItem?: (props: PaginationItemRenderProps) => ReactNode;