跳到主要内容

PageControls

  • 组件说明：点状分页指示器，用于轮播、引导页等场景，指示当前页码位置。
  • Dot 尺寸：16×4px 矩形，选中态使用 Grays/Black，未选中态使用 Grays/Gray-4。
  • 实现约定：纯 design 层组件，无 ui/ primitive，样式集中在 styles.ts 管理。
  • Figma 规范

基础用法​

结果
Loading...
实时编辑器
function Demo() {
  const [current, setCurrent] = React.useState(0)
  return <PageControls total={4} current={current} onChange={setCurrent} />
}

不同数量​

支持 2-8 个 dot。

结果
Loading...
实时编辑器
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
  <div>
    <span style={{ fontSize: 12, color: '#999', marginBottom: 4, display: 'block' }}>2 pages</span>
    <PageControls total={2} current={0} />
  </div>
  <div>
    <span style={{ fontSize: 12, color: '#999', marginBottom: 4, display: 'block' }}>4 pages</span>
    <PageControls total={4} current={1} />
  </div>
  <div>
    <span style={{ fontSize: 12, color: '#999', marginBottom: 4, display: 'block' }}>8 pages</span>
    <PageControls total={8} current={3} />
  </div>
</div>

Token​

状态Dot 颜色
选中Grays/Black#000000
未选中Grays/Gray-4#ADADAD

Props​

属性类型默认值说明
totalnumber—总页数（2-8）
currentnumber0当前选中页索引（从 0 开始）
onChange(index: number) => void—页码变更回调
classNamestring—自定义样式类