doc.md 1.8 KB

Progress 进度条

展示操作或任务的当前进度,比如上传文件。

基本用法

<nut-progress 
    percentage="30"
>
</nut-progress>

设置高度和颜色

<nut-progress
    percentage="30"
    stroke-color="#8e71c7" 
    stroke-width="12"
>
</nut-progress>

设置百分比不显示

<nut-progress 
    percentage="50"
    :show-text="false"
>
</nut-progress>

设置百分比外显

<nut-progress 
    percentage="60" 
    :text-inside="false" 
    stroke-height="24"
></nut-progress>

设置百分比内显

<nut-progress 
    percentage="60" 
    :text-inside="true" 
    stroke-width="24"
></nut-progress>

自定义尺寸

内置 smallbaselarge 三种规格供使用。

<nut-progress 
    size="small"
>
</nut-progress>
<nut-progress
    size="base"
>
</nut-progress>
<nut-progress 
    size="large"
>
</nut-progress>

设置状态显示

<nut-progress 
    percentage="30" 
    stroke-color="#f30" 
    status="active"
>
</nut-progress>
<nut-progress 
    percentage="50"
    stroke-color="#f30"
    stroke-width="15"
    status="wrong"
>
</nut-progress>
<nut-progress 
    percentage="100" 
    :stroke-width="15" 
    status="success"
>
</nut-progress>

Prop

字段 说明 类型 默认值
percentage 百分比 Number 0
stroke-color 进度条背景色 String #f30
stroke-width 进度条宽度 String ''
size 进度条及文字尺寸,可选值small/base/large String -
show-text 是否显示进度条文字内容 Boolean true
text-inside 进度条文字显示位置(false:外显,true:内显) Boolean false
text-color 进度条文字颜色设置 String #333
status 进度条当前状态,可选值text/active/wrong/success String text