docs(Progress): update docs

Tencent · May 6, 2024 · 581fbe1 · 581fbe1
1 parent f2b3759
commit 581fbe1
Show file tree

Hide file tree

Showing 13 changed files with 113 additions and 96 deletions.
diff --git a/example/pages/home/data/display.ts b/example/pages/home/data/display.ts
@@ -113,10 +113,10 @@ const skylineDisplay = {
       name: 'ImageViewer',
       label: '图片预览',
     },
-    // {
-    //   name: 'Progress',
-    //   label: '进度条',
-    // },
+    {
+      name: 'Progress',
+      label: '进度条',
+    },
     {
       name: 'Result',
       label: '结果',

diff --git a/src/loading/_example/skyline/loading.json b/src/loading/_example/skyline/loading.json
@@ -4,9 +4,6 @@
   "componentFramework": "glass-easel",
   "disableScroll": true,
   "usingComponents": {
-    "t-navbar": "tdesign-miniprogram/navbar/navbar",
-    "t-loading": "tdesign-miniprogram/loading/loading",
-    "t-image": "tdesign-miniprogram/image/image",
-    "text": "../text"
+    "loading-demo": "loading-demo"
   }
 }
diff --git a/src/progress/README.en-US.md b/src/progress/README.en-US.md
@@ -1,24 +1,33 @@
 :: 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
-external-classes `v0.25.0` | Array | - | `['t-class', 't-class-bar', 't-class-label']` | N
-label | String / Boolean / Slot | true | \- | 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
-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
+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
 stroke-width | String / Number | - | \- | N
-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
+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
 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-inner-bg-color | @brand-color | - 
---td-progress-track-bg-color | @bg-color-component | - 
+--td-progress-track-bg-color | @bg-color-component | -
diff --git a/src/progress/README.md b/src/progress/README.md
@@ -57,29 +57,33 @@ isComponent: true
 {{ circle }}
 
 ## API
+
 ### Progress Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
+style | Object | - | 样式 | N
+custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
 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 | String / Boolean / Slot | true | 进度百分比，可自定义 | N
+label | String / Boolean / Slot | true | 进度百分比，可自定义。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 percentage | Number | 0 | 进度条百分比 | N
 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
-stroke-width | String / Number | - | 进度条线宽，默认单位 `px`。| N
-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
+stroke-width | String / Number | - | 进度条线宽，默认单位 `px` | N
+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
 track-color | String | '' | 进度条未完成部分颜色 | N
+### Progress External Classes
 
-### Progress 外部样式类
-类名 | 说明
--- | -- 
+类名 | 描述
+-- | --
 t-class | 根节点样式类
 t-class-bar | 进度文字样式类
 t-class-label | 标签样式类
 
-### CSS 变量
+### CSS Variables
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
 --td-progress-circle-inner-bg-color | @font-white-1 | - 
 --td-progress-inner-bg-color | @brand-color | - 
---td-progress-track-bg-color | @bg-color-component | - 
+--td-progress-track-bg-color | @bg-color-component | -
diff --git a/src/progress/__test__/__snapshots__/demo.test.js.snap b/src/progress/__test__/__snapshots__/demo.test.js.snap
@@ -18,25 +18,30 @@ exports[`Progress Progress base demo works fine 1`] = `
 
 exports[`Progress Progress circle demo works fine 1`] = `
 <circle>
-  <t-progress
-    percentage="80"
-    theme="circle"
-  />
-  <t-progress
-    percentage="88"
-    status="warning"
-    theme="circle"
-  />
-  <t-progress
-    percentage="88"
-    status="error"
-    theme="circle"
-  />
-  <t-progress
-    percentage="88"
-    status="success"
-    theme="circle"
-  />
+  <t-demo
+    desc="环形进度条"
+    padding="{{true}}"
+  >
+    <t-progress
+      percentage="80"
+      theme="circle"
+    />
+    <t-progress
+      percentage="88"
+      status="warning"
+      theme="circle"
+    />
+    <t-progress
+      percentage="88"
+      status="error"
+      theme="circle"
+    />
+    <t-progress
+      percentage="88"
+      status="success"
+      theme="circle"
+    />
+  </t-demo>
 </circle>
 `;
 

diff --git a/src/progress/_example/base/index.js b/src/progress/_example/base/index.js
@@ -1 +1,5 @@
-Component({});
+import SkylineBehavior from '@behaviors/skyline.js';
+
+Component({
+  behaviors: [SkylineBehavior],
+});
diff --git a/src/progress/_example/base/index.wxml b/src/progress/_example/base/index.wxml
@@ -1,3 +1,3 @@
 <t-progress percentage="80" />
 <t-progress theme="plump" percentage="80" />
-<t-progress theme="circle" percentage="30" />
+<t-progress wx:if="{{!skylineRender}}" theme="circle" percentage="30" />
diff --git a/src/progress/_example/circle/index.js b/src/progress/_example/circle/index.js
@@ -1 +1,5 @@
-Component({});
+import SkylineBehavior from '@behaviors/skyline.js';
+
+Component({
+  behaviors: [SkylineBehavior],
+});
diff --git a/src/progress/_example/circle/index.wxml b/src/progress/_example/circle/index.wxml
@@ -1,4 +1,6 @@
-<t-progress theme="circle" percentage="80" />
-<t-progress theme="circle" percentage="88" status="warning" />
-<t-progress theme="circle" percentage="88" status="error" />
-<t-progress theme="circle" percentage="88" status="success" />
+<t-demo wx:if="{{!skylineRender}}" desc="环形进度条" padding>
+  <t-progress theme="circle" percentage="80" />
+  <t-progress theme="circle" percentage="88" status="warning" />
+  <t-progress theme="circle" percentage="88" status="error" />
+  <t-progress theme="circle" percentage="88" status="success" />
+</t-demo>
diff --git a/src/progress/_example/progress.wxml b/src/progress/_example/progress.wxml
@@ -1,23 +1,25 @@
-<t-navbar title="Progress" leftArrow />
-<view class="demo">
-  <view class="demo-title">Progress 进度条</view>
-  <view class="demo-desc">在导航栏下方，用于给用户显示提示消息</view>
-  <t-demo title="01 组件类型" desc="基础进度条" padding>
-    <base />
-  </t-demo>
-  <t-demo desc="过渡样式" padding>
-    <transition />
-  </t-demo>
-  <t-demo desc="自定义颜色/圆角" padding>
-    <custom />
-  </t-demo>
-  <t-demo title="02 组件状态" desc="线性进度条" padding>
-    <line />
-  </t-demo>
-  <t-demo desc="百分比内显进度条" padding>
-    <plump />
-  </t-demo>
-  <t-demo desc="环形进度条" padding>
-    <circle />
-  </t-demo>
+<view class="skyline">
+  <t-navbar title="Progress" leftArrow />
+  <scroll-view scroll-y type="list" class="scroll-view">
+    <view class="demo">
+      <view class="demo-title">Progress 进度条</view>
+      <view class="demo-desc">在导航栏下方，用于给用户显示提示消息</view>
+      <t-demo title="01 组件类型" desc="基础进度条" padding>
+        <base />
+      </t-demo>
+      <t-demo desc="过渡样式" padding>
+        <transition />
+      </t-demo>
+      <t-demo desc="自定义颜色/圆角" padding>
+        <custom />
+      </t-demo>
+      <t-demo title="02 组件状态" desc="线性进度条" padding>
+        <line />
+      </t-demo>
+      <t-demo desc="百分比内显进度条" padding>
+        <plump />
+      </t-demo>
+      <circle />
+    </view>
+  </scroll-view>
 </view>
diff --git a/src/progress/_example/skyline/progress.wxml b/src/progress/_example/skyline/progress.wxml
@@ -1,5 +1 @@
-<view class="skyline">
-  <scroll-view scroll-y type="list" class="scroll-view">
-    <demo-progress />
-  </scroll-view>
-</view>
+<demo-progress />
diff --git a/src/progress/props.ts b/src/progress/props.ts
@@ -11,10 +11,6 @@ const props: TdProgressProps = {
     type: null,
     value: '',
   },
-  /** 组件类名，分别用于设置 组件外层、进度文字等元素类名。 */
-  externalClasses: {
-    type: Array,
-  },
   /** 进度百分比，可自定义 */
   label: {
     type: null,
@@ -29,10 +25,15 @@ const props: TdProgressProps = {
   status: {
     type: String,
   },
-  /** 进度条线宽。宽度数值不能超过 size 的一半，否则不能输出环形进度 */
+  /** 进度条线宽，默认单位 `px` */
   strokeWidth: {
     type: null,
   },
+  /** 自定义组件样式 */
+  style: {
+    type: String,
+    value: '',
+  },
   /** 进度条风格。值为 line，标签（label）显示在进度条右侧；值为 plump，标签（label）显示在进度条里面；值为 circle，标签（label）显示在进度条正中间 */
   theme: {
     type: String,

diff --git a/src/progress/type.ts b/src/progress/type.ts
@@ -13,21 +13,6 @@ export interface TdProgressProps {
     type: null;
     value?: string | Array<string> | Record<string, string>;
   };
-  /**
-   * 自定义组件样式
-   * @default ''
-   */
-  style?: {
-    type: StringConstructor;
-    value?: string;
-  };
-  /**
-   * 组件类名，分别用于设置 组件外层、进度文字等元素类名。
-   */
-  externalClasses?: {
-    type: ArrayConstructor;
-    value?: ['t-class', 't-class-bar', 't-class-label'];
-  };
   /**
    * 进度百分比，可自定义
    * @default true
@@ -52,12 +37,20 @@ export interface TdProgressProps {
     value?: StatusEnum;
   };
   /**
-   * 进度条线宽。宽度数值不能超过 size 的一半，否则不能输出环形进度
+   * 进度条线宽，默认单位 `px`
    */
   strokeWidth?: {
     type: null;
     value?: string | number;
   };
+  /**
+   * 自定义组件样式
+   * @default ''
+   */
+  style?: {
+    type: StringConstructor;
+    value?: string;
+  };
   /**
    * 进度条风格。值为 line，标签（label）显示在进度条右侧；值为 plump，标签（label）显示在进度条里面；值为 circle，标签（label）显示在进度条正中间
    * @default line