Skip to content

Commit 9755a89

Browse files
anlyyaoanlyyao
committed
docs(Progress): update docs
1 parent f2b3759 commit 9755a89

File tree

12 files changed

+112
-92
lines changed

12 files changed

+112
-92
lines changed

‎example/pages/home/data/display.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -113,10 +113,10 @@ const skylineDisplay = {
113113
name: 'ImageViewer',
114114
label: '图片预览',
115115
},
116-
// {
117-
// name: 'Progress',
118-
// label: '进度条',
119-
// },
116+
{
117+
name: 'Progress',
118+
label: '进度条',
119+
},
120120
{
121121
name: 'Result',
122122
label: '结果',

‎src/progress/README.en-US.md

+14-5
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,33 @@
11
:: BASE_DOC ::
22

33
## API
4+
45
### Progress Props
56

67
name | type | default | description | required
78
-- | -- | -- | -- | --
9+
style | Object | - | CSS(Cascading Style Sheets) | N
10+
custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
811
color | String / Object / Array | '' | Typescript：`string \| Array<string> \| Record<string, string>` | N
9-
external-classes `v0.25.0` | Array | - | `['t-class', 't-class-bar', 't-class-label']` | N
10-
label | String / Boolean / Slot | true | \- | N
12+
label | String / Boolean / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
1113
percentage | Number | 0 | \- | N
12-
status | String | - | options：success/error/warning/active。Typescript：`StatusEnum` `type StatusEnum = 'success' \| 'error' \| 'warning' \| 'active'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N
14+
status | String | - | options: success/error/warning/active。Typescript：`StatusEnum` `type StatusEnum = 'success' \| 'error' \| 'warning' \| 'active'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N
1315
stroke-width | String / Number | - | \- | N
14-
theme | String | line | options：line/plump/circle。Typescript：`ThemeEnum` `type ThemeEnum = 'line' \| 'plump' \| 'circle'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N
16+
theme | String | line | options: line/plump/circle。Typescript：`ThemeEnum` `type ThemeEnum = 'line' \| 'plump' \| 'circle'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N
1517
track-color | String | '' | \- | N
18+
### Progress External Classes
1619

20+
className | Description
21+
-- | --
22+
t-class | \-
23+
t-class-bar | \-
24+
t-class-label | \-
1725

1826
### CSS Variables
27+
1928
The component provides the following CSS variables, which can be used to customize styles.
2029
Name | Default Value | Description
2130
-- | -- | --
2231
--td-progress-circle-inner-bg-color | @font-white-1 | -
2332
--td-progress-inner-bg-color | @brand-color | -
24-
--td-progress-track-bg-color | @bg-color-component | -
33+
--td-progress-track-bg-color | @bg-color-component | -

‎src/progress/README.md

+13-9
Original file line numberDiff line numberDiff line change
@@ -57,29 +57,33 @@ isComponent: true
5757
{{ circle }}
5858

5959
## API
60+
6061
### Progress Props
6162

62-
名称 | 类型 | 默认值 | 说明 | 必传
63+
名称 | 类型 | 默认值 | 描述 | 必传
6364
-- | -- | -- | -- | --
65+
style | Object | - | 样式 | N
66+
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
6467
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
65-
label | String / Boolean / Slot | true | 进度百分比，可自定义 | N
68+
label | String / Boolean / Slot | true | 进度百分比，可自定义。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
6669
percentage | Number | 0 | 进度条百分比 | N
6770
status | String | - | 进度条状态。可选项：success/error/warning/active。TS 类型：`StatusEnum` `type StatusEnum = 'success' \| 'error' \| 'warning' \| 'active'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N
68-
stroke-width | String / Number | - | 进度条线宽，默认单位 `px`。| N
69-
theme | String | line | 进度条风格。值为 line，标签（label）显示在进度条右侧；值为 plump，标签（label）显示在进度条里面；值为 circle，标签（label）显示在进度条正中间。可选项：line/plump/circle。TS 类型：`ThemeEnum` `type ThemeEnum = 'line' \| 'plump' \| 'circle'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N
71+
stroke-width | String / Number | - | 进度条线宽，默认单位 `px` | N
72+
theme | String | line | 进度条风格。值为 line，标签（label）显示在进度条右侧；值为 plump，标签（label）显示在进度条里面；值为 circle，标签（label）显示在进度条正中间。可选项：line/plump/circle，skyline 模式下暂不支持枚举值circle。TS 类型：`ThemeEnum` `type ThemeEnum = 'line' \| 'plump' \| 'circle'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N
7073
track-color | String | '' | 进度条未完成部分颜色 | N
74+
### Progress External Classes
7175

72-
### Progress 外部样式类
73-
类名 | 说明
74-
-- | --
76+
类名 | 描述
77+
-- | --
7578
t-class | 根节点样式类
7679
t-class-bar | 进度文字样式类
7780
t-class-label | 标签样式类
7881

79-
### CSS 变量
82+
### CSS Variables
83+
8084
组件提供了下列 CSS 变量，可用于自定义样式。
8185
名称 | 默认值 | 描述
8286
-- | -- | --
8387
--td-progress-circle-inner-bg-color | @font-white-1 | -
8488
--td-progress-inner-bg-color | @brand-color | -
85-
--td-progress-track-bg-color | @bg-color-component | -
89+
--td-progress-track-bg-color | @bg-color-component | -

‎src/progress/__test__/__snapshots__/demo.test.js.snap

+24-19
Original file line numberDiff line numberDiff line change
@@ -18,25 +18,30 @@ exports[`Progress Progress base demo works fine 1`] = `
1818

1919
exports[`Progress Progress circle demo works fine 1`] = `
2020
<circle>
21-
<t-progress
22-
percentage="80"
23-
theme="circle"
24-
/>
25-
<t-progress
26-
percentage="88"
27-
status="warning"
28-
theme="circle"
29-
/>
30-
<t-progress
31-
percentage="88"
32-
status="error"
33-
theme="circle"
34-
/>
35-
<t-progress
36-
percentage="88"
37-
status="success"
38-
theme="circle"
39-
/>
21+
<t-demo
22+
desc="环形进度条"
23+
padding="{{true}}"
24+
>
25+
<t-progress
26+
percentage="80"
27+
theme="circle"
28+
/>
29+
<t-progress
30+
percentage="88"
31+
status="warning"
32+
theme="circle"
33+
/>
34+
<t-progress
35+
percentage="88"
36+
status="error"
37+
theme="circle"
38+
/>
39+
<t-progress
40+
percentage="88"
41+
status="success"
42+
theme="circle"
43+
/>
44+
</t-demo>
4045
</circle>
4146
`;
4247

‎src/progress/_example/base/index.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
1-
Component({});
1+
import SkylineBehavior from '@behaviors/skyline.js';
2+
3+
Component({
4+
behaviors: [SkylineBehavior],
5+
});

‎src/progress/_example/base/index.wxml

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<t-progress percentage="80" />
22
<t-progress theme="plump" percentage="80" />
3-
<t-progress theme="circle" percentage="30" />
3+
<t-progress wx:if="{{!skylineRender}}" theme="circle" percentage="30" />

‎src/progress/_example/circle/index.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
1-
Component({});
1+
import SkylineBehavior from '@behaviors/skyline.js';
2+
3+
Component({
4+
behaviors: [SkylineBehavior],
5+
});

‎src/progress/_example/circle/index.wxml

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
<t-progress theme="circle" percentage="80" />
2-
<t-progress theme="circle" percentage="88" status="warning" />
3-
<t-progress theme="circle" percentage="88" status="error" />
4-
<t-progress theme="circle" percentage="88" status="success" />
1+
<t-demo wx:if="{{!skylineRender}}" desc="环形进度条" padding>
2+
<t-progress theme="circle" percentage="80" />
3+
<t-progress theme="circle" percentage="88" status="warning" />
4+
<t-progress theme="circle" percentage="88" status="error" />
5+
<t-progress theme="circle" percentage="88" status="success" />
6+
</t-demo>

‎src/progress/_example/progress.wxml

+24-22
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
1-
<t-navbar title="Progress" leftArrow />
2-
<view class="demo">
3-
<view class="demo-title">Progress 进度条</view>
4-
<view class="demo-desc">在导航栏下方，用于给用户显示提示消息</view>
5-
<t-demo title="01 组件类型" desc="基础进度条" padding>
6-
<base />
7-
</t-demo>
8-
<t-demo desc="过渡样式" padding>
9-
<transition />
10-
</t-demo>
11-
<t-demo desc="自定义颜色/圆角" padding>
12-
<custom />
13-
</t-demo>
14-
<t-demo title="02 组件状态" desc="线性进度条" padding>
15-
<line />
16-
</t-demo>
17-
<t-demo desc="百分比内显进度条" padding>
18-
<plump />
19-
</t-demo>
20-
<t-demo desc="环形进度条" padding>
21-
<circle />
22-
</t-demo>
1+
<view class="skyline">
2+
<t-navbar title="Progress" leftArrow />
3+
<scroll-view scroll-y type="list" class="scroll-view">
4+
<view class="demo">
5+
<view class="demo-title">Progress 进度条</view>
6+
<view class="demo-desc">在导航栏下方，用于给用户显示提示消息</view>
7+
<t-demo title="01 组件类型" desc="基础进度条" padding>
8+
<base />
9+
</t-demo>
10+
<t-demo desc="过渡样式" padding>
11+
<transition />
12+
</t-demo>
13+
<t-demo desc="自定义颜色/圆角" padding>
14+
<custom />
15+
</t-demo>
16+
<t-demo title="02 组件状态" desc="线性进度条" padding>
17+
<line />
18+
</t-demo>
19+
<t-demo desc="百分比内显进度条" padding>
20+
<plump />
21+
</t-demo>
22+
<circle />
23+
</view>
24+
</scroll-view>
2325
</view>

‎src/progress/_example/skyline/progress.wxml

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1 @@
1-
<view class="skyline">
2-
<scroll-view scroll-y type="list" class="scroll-view">
3-
<demo-progress />
4-
</scroll-view>
5-
</view>
1+
<demo-progress />

‎src/progress/props.ts

+6-5
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,6 @@ const props: TdProgressProps = {
1111
type: null,
1212
value: '',
1313
},
14-
/** 组件类名，分别用于设置 组件外层、进度文字等元素类名。 */
15-
externalClasses: {
16-
type: Array,
17-
},
1814
/** 进度百分比，可自定义 */
1915
label: {
2016
type: null,
@@ -29,10 +25,15 @@ const props: TdProgressProps = {
2925
status: {
3026
type: String,
3127
},
32-
/** 进度条线宽。宽度数值不能超过 size 的一半，否则不能输出环形进度 */
28+
/** 进度条线宽，默认单位 `px` */
3329
strokeWidth: {
3430
type: null,
3531
},
32+
/** 自定义组件样式 */
33+
style: {
34+
type: String,
35+
value: '',
36+
},
3637
/** 进度条风格。值为 line，标签（label）显示在进度条右侧；值为 plump，标签（label）显示在进度条里面；值为 circle，标签（label）显示在进度条正中间 */
3738
theme: {
3839
type: String,

‎src/progress/type.ts

+9-16
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,6 @@ export interface TdProgressProps {
1313
type: null;
1414
value?: string | Array<string> | Record<string, string>;
1515
};
16-
/**
17-
* 自定义组件样式
18-
* @default ''
19-
*/
20-
style?: {
21-
type: StringConstructor;
22-
value?: string;
23-
};
24-
/**
25-
* 组件类名，分别用于设置 组件外层、进度文字等元素类名。
26-
*/
27-
externalClasses?: {
28-
type: ArrayConstructor;
29-
value?: ['t-class', 't-class-bar', 't-class-label'];
30-
};
3116
/**
3217
* 进度百分比，可自定义
3318
* @default true
@@ -52,12 +37,20 @@ export interface TdProgressProps {
5237
value?: StatusEnum;
5338
};
5439
/**
55-
* 进度条线宽。宽度数值不能超过 size 的一半，否则不能输出环形进度
40+
* 进度条线宽，默认单位 `px`
5641
*/
5742
strokeWidth?: {
5843
type: null;
5944
value?: string | number;
6045
};
46+
/**
47+
* 自定义组件样式
48+
* @default ''
49+
*/
50+
style?: {
51+
type: StringConstructor;
52+
value?: string;
53+
};
6154
/**
6255
* 进度条风格。值为 line，标签（label）显示在进度条右侧；值为 plump，标签（label）显示在进度条里面；值为 circle，标签（label）显示在进度条正中间
6356
* @default line

0 commit comments

Comments
 (0)