Progress 进度条

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

基本用法

  1. <nut-progress
  2. percentage="30"
  3. >
  4. </nut-progress>

设置高度和颜色

  1. <nut-progress
  2. percentage="30"
  3. stroke-color="pink"
  4. stroke-width="20"
  5. >
  6. </nut-progress>

设置百分比不显示

  1. <nut-progress
  2. percentage="50"
  3. :show-text="false"
  4. >
  5. </nut-progress>

设置百分比外显

  1. <nut-progress
  2. percentage="60"
  3. :text-inside="false"
  4. stroke-height="24"
  5. ></nut-progress>

设置百分比内显

  1. <nut-progress
  2. percentage="60"
  3. :text-inside="true"
  4. stroke-width="24"
  5. ></nut-progress>

自定义尺寸

内置 smallbaselarge 三种规格供使用。

  1. <nut-progress
  2. size="small"
  3. percentage="30"
  4. text-inside="true"
  5. >
  6. </nut-progress>
  7. <nut-progress
  8. size="base"
  9. percentage="50"
  10. text-inside="true"
  11. >
  12. </nut-progress>
  13. <nut-progress
  14. size="large"
  15. percentage="70"
  16. text-inside="true"
  17. >
  18. </nut-progress>

设置状态显示

  1. <nut-progress
  2. percentage="30"
  3. stroke-color="#1890ff"
  4. status="active"
  5. >
  6. </nut-progress>
  7. <nut-progress
  8. percentage="50"
  9. stroke-color="#f30"
  10. stroke-width="15"
  11. status="wrong"
  12. >
  13. </nut-progress>
  14. <nut-progress
  15. percentage="100"
  16. stroke-color="#1890ff"
  17. :stroke-width="15"
  18. status="success"
  19. >
  20. </nut-progress>

Prop

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

Progress 进度条 - 图1