zhsw_wechat/miniprogram_npm/tdesign-miniprogram/progress

:: BASE_DOC ::

API

Progress Props

name | type | default | description | required -- | -- | -- | -- | -- style | Object | - | CSS(Cascading Style Sheets) | N custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N color | String / Object / Array | '' | Typescript：string \| Array<string> \| Record<string, string> | N label | String / Boolean / Slot | true | see more ts definition | N percentage | Number | 0 | - | N status | String | - | options: success/error/warning/active。Typescript：ProgressStatus type ProgressStatus = 'success' \| 'error' \| 'warning' \| 'active'。see more ts definition | N stroke-width | String / Number | - | - | N theme | String | line | options: line/plump/circle。Typescript：ProgressTheme type ProgressTheme = 'line' \| 'plump' \| 'circle'。see more ts definition | N track-color | String | '' | - | N

Progress External Classes

className | Description -- | -- t-class | - t-class-bar | - t-class-label | -

CSS Variables

The component provides the following CSS variables, which can be used to customize styles.

Name | Default Value | Description -- | -- | -- --td-progress-circle-inner-bg-color | @font-white-1 | - --td-progress-circle-width | 224rpx | - --td-progress-circle-from | 0deg | - --td-progress-inner-bg-color | @brand-color | - --td-progress-line-stroke-width | 12rpx | - --td-progress-stroke-circle-width | 12rpx | - --td-progress-stroke-plump-width | 40rpx | - --td-progress-track-bg-color | @bg-color-component | - --td-progress-circle-label-font-size | 40rpx | - --td-progress-circle-label-line-height | 56rpx | - --td-progress-circle-label-font-weight | 700 | -