Progress 进度条请使用手机扫码体验
展示操作或任务的当前进度,比如上传文件。
基本用法
- html
<nut-progress
percentage="30"
>
</nut-progress>
设置高度和颜色
- html
<nut-progress
percentage="30"
strokeColor="#8e71c7"
strokeWidth="12"
>
</nut-progress>
设置百分比不显示
- html
<nut-progress
percentage="50"
:showText="false"
>
</nut-progress>
设置百分比内显
- html
<nut-progress
percentage="60"
:textInside="true"
strokeWidth="24"
></nut-progress>
设置状态显示
- html
<nut-progress
percentage="30"
strokeColor="#f30"
status="active"
>
</nut-progress>
<nut-progress
percentage="50"
strokeColor="#f30"
strokeWidth="15"
status="wrong"
>
</nut-progress>
<nut-progress
percentage="100"
:strokeWidth="15"
status="success"
>
</nut-progress>
自定义尺寸
内置 small,base,large 三种规格供使用。
- html
<nut-progress
size="small"
>
</nut-progress>
<nut-progress
size="base"
>
</nut-progress>
<nut-progress
size="large"
>
</nut-progress>
Prop
字段 | 说明 | 类型 | 默认值 |
---|---|---|---|
percentage | 百分比 | Number | 0 |
strokeColor | 进度条背景色 | String | #1890ff |
strokeWidth | 进度条高度 | String | '' |
size | 进度条及文字尺寸,可选值small/base/large | String | - |
showText | 是否显示进度条文字内容 | Boolean | true |
textInside | 进度条文字显示位置 | Boolean | false |
status | 进度条当前状态,可选值text/active/wrong/success | String | text |