Spinner 加载指示器
表示「正在加载」。三档尺寸沿用语义图标 16 / 16 / 20 的刻度,与控件三档一一对应。
三档尺寸
沿用「语义图标 16 / 16 / 20」的刻度,与控件三档一一对应 —— sm 与 md 视觉上相同不是笔误。
<pt-spinner size="sm"></pt-spinner>
<pt-spinner></pt-spinner>
<pt-spinner size="lg"></pt-spinner>自定义读屏文案
默认念当前 locale 的「加载中」;知道在加载什么时,说得更具体一点。
<pt-spinner label="正在加载报表"></pt-spinner>无障碍
宿主是 role="status" + aria-live="polite",出现时读屏会念一遍 label。 默认文案取当前 locale 的「加载中」,跟着 lang 属性或 setLocale() 切换; 知道在加载什么时,用 label 说得更具体一点。
减少动态效果
系统开了「减少动态效果」时,转圈改成慢速脉冲而不是完全静止 —— 完全静止会让「正在加载」这个信息彻底消失。
按钮里的加载态
pt-button 的 loading 内部用的就是它,尺寸跟着按钮档位走,不需要自己往按钮里塞 spinner。
API
属性
| 属性 | Attribute | 类型 | 默认值 | 说明 |
|---|---|---|---|---|
label | label | string | undefined | — | 读屏文案。默认取当前 locale 里的「加载中」 |
size | size | "lg" | "md" | "sm" | 'md' | 尺寸档位 |
可定制的内部元素(::part())
| part | 说明 |
|---|---|
base | 内部的 svg |
CSS 变量
| 变量 | 说明 |
|---|---|
--pt-spinner-color | 颜色,默认取正文档 --pt-text-standard |