PageIndicator 分页符
示例
基础用法
<PageIndicator total={4} />
白色
<PageIndicator total={4} --sunp-color="white" --sunp-active-color="white" />
竖直方向
<PageIndicator total={4} direction="vertical" />
自定义颜色和尺寸
<PageIndicator
total={4}
value={1}
--sunp-color="rgba(0, 0, 0, 0.4)"
--sunp-active-color="#ffc0cb"
--sunp-size="10px"
--sunp-active-size="30px"
--sunp-radius="15px"
--sunp-gap="8px"
/>
List
属性
| 属性 |
说明 |
类型 |
默认值 |
| direction |
方向 |
'horizontal' | 'vertical' |
'horizontal' |
| value |
当前页 (从 0 开始计数) |
number |
0 |
| total |
总页数 |
number |
0 |
CSS 变量
| 属性 |
说明 |
默认值 |
| --sunp-size |
指示器的尺寸 |
3px |
| --sunp-gap |
指示器之间的间距 |
3px |
| --sunp-radius |
指示器的圆角半径 |
1px |
| --sunp-color |
指示器的颜色 |
var(--sunp-color-weak) |
| --sunp-active-color |
当前页指示器的颜色 |
var(--sunp-color-primary) |
| --sunp-active-size |
当前页指示器的尺寸 |
13px |