README.md 2.1 KB


title: Progress description: 进度条。 spline: message

isComponent: true

引入

引入组件

app.jsonpage.json 中引入组件:

"usingComponents": {
  "t-progress": "tdesign-miniprogram/progress/progress"
}

代码演示

基础进度条

{{ base }}

进度条状态

{{ status }}

过度样式

{{ transition }}

自定义颜色/圆角

{{ custom }}

带数值/无数值进度条

{{ size }}

API

Progress Props

名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- color | String / Object / Array | '' | 进度条颜色。示例:'#ED7B2F' 或 'orange' 或 ['#f00', '#0ff', '#f0f']{ '0%': '#f00', '100%': '#0ff' }{ from: '#000', to: '#000' } 等。TS 类型:string | Array<string> | Record<string, string> | N label | Boolean | true | 是否显示进度文字,可通过slot自定义 | N percentage | Number | 0 | 进度条百分比 | N status | String | - | 进度条状态。可选项:success/error/warning/active。TS 类型:StatusEnum type StatusEnum = 'success' | 'error' | 'warning' | 'active'详细类型定义 | N stroke-width | String / Number | - | 进度条线宽。宽度数值不能超过 size 的一半,否则不能输出环形进度 | N track-color | String | '' | 进度条未完成部分颜色 | N external-classes | Array | - | 样式类名,分别用于设置 组件外层、进度文字等元素类名。['t-class', 't-class-bar', 't-class-label'] | N |