From aae4aabf9d95a71ba391d5e80511d1a62e52b8ff Mon Sep 17 00:00:00 2001 From: anlyyao Date: Tue, 22 Apr 2025 14:28:21 +0800 Subject: [PATCH 1/3] feat(Progress): support size props --- src/progress/README.en-US.md | 3 ++- src/progress/README.md | 3 ++- src/progress/progress.less | 32 +++++++++++++------------------- src/progress/progress.wxml | 9 +++------ src/progress/progress.wxs | 25 +++++++++++++++++++++---- src/progress/props.ts | 10 +++++----- src/progress/type.ts | 16 ++++++++-------- 7 files changed, 54 insertions(+), 44 deletions(-) diff --git a/src/progress/README.en-US.md b/src/progress/README.en-US.md index f9d303bfa..683a1442a 100644 --- a/src/progress/README.en-US.md +++ b/src/progress/README.en-US.md @@ -11,6 +11,7 @@ custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on v color | String / Object / Array | '' | Typescript：`string \| Array \| Record` | N label | String / Boolean / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N percentage | Number | 0 | \- | N +size | String / Number | 'default' | \- | N status | String | - | options: success/error/warning/active。Typescript：`ProgressStatus` `type ProgressStatus = 'success' \| 'error' \| 'warning' \| 'active'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N stroke-width | String / Number | - | \- | N theme | String | line | options: line/plump/circle。Typescript：`ProgressTheme` `type ProgressTheme = 'line' \| 'plump' \| 'circle'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N @@ -40,4 +41,4 @@ Name | Default Value | Description --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 | - +--td-progress-circle-label-font-weight | 700 | - \ No newline at end of file diff --git a/src/progress/README.md b/src/progress/README.md index fe838da90..006c13654 100644 --- a/src/progress/README.md +++ b/src/progress/README.md @@ -73,6 +73,7 @@ custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场 color | String / Object / Array | '' | 进度条颜色。示例：'#ED7B2F' 或 'orange' 或 `['#f00', '#0ff', '#f0f']` 或 `{ '0%': '#f00', '100%': '#0ff' }` 或 `{ from: '#000', to: '#000' }` 等。TS 类型：`string \| Array \| Record` | N label | String / Boolean / Slot | true | 进度百分比，可自定义。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N percentage | Number | 0 | 进度条百分比 | N +size | String / Number | 'default' | 进度条尺寸，仅对环形进度条有效。可选值：default/micro。default 值为 112； micro 值为 24 | N status | String | - | 进度条状态。可选项：success/error/warning/active。TS 类型：`ProgressStatus` `type ProgressStatus = 'success' \| 'error' \| 'warning' \| 'active'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N stroke-width | String / Number | - | 进度条线宽，默认单位 `px` | N theme | String | line | 进度条风格。值为 line，标签（label）显示在进度条右侧；值为 plump，标签（label）显示在进度条里面；值为 circle，标签（label）显示在进度条正中间。可选项：line/plump/circle。TS 类型：`ProgressTheme` `type ProgressTheme = 'line' \| 'plump' \| 'circle'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N @@ -102,4 +103,4 @@ t-class-label | 标签样式类 --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 | - +--td-progress-circle-label-font-weight | 700 | - \ No newline at end of file diff --git a/src/progress/progress.less b/src/progress/progress.less index e515d94d9..9c9d9d8fd 100644 --- a/src/progress/progress.less +++ b/src/progress/progress.less @@ -153,8 +153,10 @@ -webkit-line-clamp: 2; } - .@{progress}__icon { - font-size: @progress-circle-icon-font-size; + &--micro { + --td-progress-circle-width: 48rpx; + --td-progress-stroke-circle-width: 4rpx; + --td-progress-circle-icon-font-size: 40rpx; } } @@ -176,34 +178,26 @@ } } -.@{progress}--status--success { +.progress-status(@bgColor, @iconColor) { .@{progress}__inner { - background: @progress-inner-bg-color-success; + background: @bgColor; } .@{progress}__icon { - color: @success-color; + color: @iconColor; } } -.@{progress}--status--warning { - .@{progress}__inner { - background: @progress-inner-bg-color-warning; - } +.@{progress}--status--success { + .progress-status(@progress-inner-bg-color-success, @success-color); +} - .@{progress}__icon { - color: @warning-color; - } +.@{progress}--status--warning { + .progress-status(@progress-inner-bg-color-warning, @warning-color); } .@{progress}--status--error { - .@{progress}__inner { - background: @progress-inner-bg-color-error; - } - - .@{progress}__icon { - color: @error-color; - } + .progress-status(@progress-inner-bg-color-error, @error-color); } @keyframes progress-active-animation { diff --git a/src/progress/progress.wxml b/src/progress/progress.wxml index 4cdedf94f..1071404fb 100644 --- a/src/progress/progress.wxml +++ b/src/progress/progress.wxml @@ -75,13 +75,10 @@ aria-valuenow="{{computedProgress}}" aria-label="{{ ariaLabel || (isIOS ? _this.getIOSAriaLabel(status) : _this.getAndroidAriaLabel(status)) }}" aria-live="polite" - class="{{classPrefix}}__canvas--circle" - style="background-image: conic-gradient(from var(--td-progress-circle-from), {{colorCircle || _this.STATUS_COLOR[status] || 'var(--td-progress-inner-bg-color)'}} {{computedProgress}}%, {{bgColorBar || 'var(--td-progress-track-bg-color)'}} 0%);" + class="{{_.cls(classPrefix + '__canvas--circle', [[size, true]])}}" + style="{{_this.getCircleStyle(size, heightBar)}}; background-image: conic-gradient(from var(--td-progress-circle-from), {{colorCircle || _this.STATUS_COLOR[status] || 'var(--td-progress-inner-bg-color)'}} {{computedProgress}}%, {{bgColorBar || 'var(--td-progress-track-bg-color)'}} 0%);" > - +