进度条 Progress
示例
基本形式
<progress percent="36" />
颜色扩展
<progress percent="25" state="info" />
<progress percent="50" state="success" />
<progress percent="75" state="warning" />
<progress percent="100" state="error" />
尺寸扩展
<progress percent="20" size="xs" />
<progress percent="40" size="sm" />
<progress percent="60" />
<progress percent="80" size="lg" />
<progress percent="100" size="xl" />
条纹
<progress percent="36" striped />
条纹动画
<progress percent="72" state="error" striped active />
API
Class
Progress
继承自Component。
Options
new Progress()
| 参数 | 类型 | 默认值 | 数据流向 | 描述 |
|---|---|---|---|---|
data | object | 绑定属性 | ||
data.percent | number | 36 | outer => inner | 百分比 |
data.text | string boolean | true | outer => inner | 在进度条中是否显示百分比。值为`string`时显示该段文字。 |
data.size | string | null | outer => inner | 进度条的尺寸 |
data.state | string | null | outer => inner | 进度条的状态 |
data.striped | boolean | false | outer => inner | 是否显示条纹 |
data.active | boolean | false | outer => inner | 进度条是否为激活状态，当`striped`为`true`时，进度条显示动画 |
data.visible | boolean | true | outer => inner | 是否显示 |
data.class | string | '' | outer => inner | 补充class |