Pagination & Stepper

Pagination 分页器 · Stepper 进度点指示器 · PageDot 原子单元。

Pagination

完整分页控件，前后箭头 + 页码窗口 + ellipsis，3 色（purple/blue/black）。

import { Pagination, Stepper, PageDot } from "@forge-ui/react";

totalPages + currentPage 受控驱动，onPageChange 捕获点击。

......

1<Pagination totalPages={10} currentPage={3} onPageChange={(p) => setPage(p)} />

3 种主色。示例用 purple，其余见 cases。

......

1<Pagination totalPages={10} currentPage={3} color="purple" />

Attribute	Type	Default	Description
`totalPages`	`number`	`—`	总页数。
`currentPage`	`number`	`—`	当前页码（1-based）。
`onPageChange`	`(page: number) => void`	`—`	切换页码回调。
`color`	`'purple' \| 'blue' \| 'black'`	`'purple'`	选中页主色。
`className`	`string`	`—`	额外 className。

onboarding 底部用的 1/N 进度胶囊，active 胶囊变宽。

1<Stepper total={5} current={3} />

3 色可选，示例为 purple。

1<Stepper total={5} current={3} color="purple" />

Attribute	Type	Default	Description
`total`	`number`	`—`	步骤总数。
`current`	`number`	`1`	当前完成到第几步（active 胶囊数量）。
`color`	`'purple' \| 'blue' \| 'black'`	`'purple'`	active 胶囊颜色。
`className`	`string`	`—`	额外 className。

Pagination 的原子单元，圆形 pill，支持 active / idle / ellipsis 三种渲染。

传 onClick 渲染为 button，否则是 span（用于 ellipsis 或静态展示）。

1...

1<PageDot active>1</PageDot>
2<PageDot onClick={() => {}}>2</PageDot>
3<PageDot>...</PageDot>

Attribute	Type	Default	Description
`children`	`ReactNode`	`—`	显示内容，通常是数字或 "..."。
`color`	`'purple' \| 'blue' \| 'black'`	`'purple'`	active 态主色。
`active`	`boolean`	`false`	是否选中态（实心填充）。
`onClick`	`() => void`	`—`	点击回调。传了就渲染成 button，没传是 span。