…
分页是什么？
分页在已知总数里移动。点名页码窗口、省略号位置，以及首尾两端的行为。
变体
点击属性即可在预览中高亮。
- 在 Prompt 里写明这个类型。
- 在 Prompt 里写明这个类型。
- 在 Prompt 里写明这个类型。
- 给具体值，不要只给感觉词。
- 给具体值，不要只给感觉词。
- 给具体值，不要只给感觉词。
- 给具体值，不要只给感觉词。
- 给具体值，不要只给感觉词。
状态
点击属性即可在预览中高亮。
- 输入或报错前字段的默认有效状态。
- 在 Prompt 里写明这个状态。
- 指针悬停时的反馈：抬起、变色或边框变化。写清楚，别让模型自己猜。
- 不可交互的控件，置灰且不可聚焦。
结构解剖
这些是 Prompt 里应该点名的部件。
- 01 上一页按钮
- 02 页码
- 03 省略号
- 04 下一页按钮
什么时候用
- 已知总数的搜索结果与长表格
- 跨页归档内容
- 需要深链到具体页的后台列表
什么时候别用
- 列表无限或流式加载——改用无限滚动
- 不足两页
- 用户是浏览而非翻页——改用筛选
Never wrap from the last page to the first — disable the ends so the user knows where the list stops.
Create a pagination component.
STYLE
- 32px square buttons, 8px radius, 13px #1D1D1F numbers
- current page: #0071E3 surface, white number, not clickable
- prev and next carry 14px chevrons and a visible label
- ellipsis replaces hidden ranges with a 13px #6E6E73 …
STATES
- default, hover #F5F5F7, current, disabled ends at 40%
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui