Fighting Design

Appearance

On this page

Progress 进度条 ​

据说进度条都是假的

基本使用 ​

percentage 属性表示进度条对应的百分比，取值范围在 0-100 范围内。

type 属性可以配置不同的进度条样式，展示不同的颜色状态

10%
10%
10%
10%
10%
10%
开启

显示百分比 ​

show-text 属性用来展示进度条百分比

outside-text 属性可配置在外部显示百分比

10%
70%
开启

自定义高度 ​

height 属性可配置进度条的高度

10%
40%
开启

自定义颜色 ​

可以通过 color 属性设置进度条的颜色，会覆盖 type 属性对应的颜色

background 属性来设置进度条背景色

70%
40%
开启

条纹状态 ​

stripe 可以配置条纹样式

10%
10%
10%
10%
10%
10%
开启

Attributes ​

参数说明类型可选值默认值
percentage百分比number0 ~ 1000
type类型FightingTypedefault primary success danger warning infoprimary
height自定义高度string / number————
show-text是否显示百分比文字内容boolean——false
outside-text是否在外部显示文本boolean——false
text-color百分比文字的颜色string————
color进度条颜色string————
background进度条背景色string————
stripe是否开启条纹效果boolean——false

Interface ​

组件导出以下类型定义：

ts
import type { ProgressInstance, ProgressProps } from 'fighting-design'

Contributors ​