feat(Tabs): add bottomLineMode props (#517)

TDesignOteam · Jan 8, 2025 · e654da5 · e654da5
1 parent 947dd30
commit e654da5
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 4 deletions.
diff --git a/db/TDesign.db b/db/TDesign.db
diff --git a/packages/products/tdesign-miniprogram/src/tab-panel/props.ts b/packages/products/tdesign-miniprogram/src/tab-panel/props.ts
@@ -24,6 +24,11 @@ const props: TdTabPanelProps = {
     type: String,
     value: '',
   },
+  /** 是否启用选项卡懒加载 */
+  lazy: {
+    type: Boolean,
+    value: false,
+  },
   /** 用于自定义选项卡面板内容 */
   panel: {
     type: String,

diff --git a/packages/products/tdesign-miniprogram/src/tab-panel/type.ts b/packages/products/tdesign-miniprogram/src/tab-panel/type.ts
@@ -37,6 +37,14 @@ export interface TdTabPanelProps {
     type: StringConstructor;
     value?: string;
   };
+  /**
+   * 是否启用选项卡懒加载
+   * @default false
+   */
+  lazy?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
   /**
    * 用于自定义选项卡面板内容
    */

diff --git a/packages/products/tdesign-miniprogram/src/tabs/README.en-US.md b/packages/products/tdesign-miniprogram/src/tabs/README.en-US.md
@@ -9,6 +9,7 @@ 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
 animation | Object | - | Typescript：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
+bottom-line-mode | String | fixed | options: fixed/auto/full | N
 middle | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 show-bottom-line | Boolean | true | \- | N
 space-evenly | Boolean | true | \- | N
@@ -49,5 +50,6 @@ badge-props | Object | - | \- | N
 disabled | Boolean | false | \- | N
 icon | String / Object | - | \- | N
 label | String | - | \- | N
+lazy | Boolean | false | Enable tab lazy loading | N
 panel | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 value | String / Number | - | Typescript：`TabValue`，[Tabs API Documents](./tabs?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-panel/type.ts) | N
diff --git a/packages/products/tdesign-miniprogram/src/tabs/README.md b/packages/products/tdesign-miniprogram/src/tabs/README.md
@@ -9,6 +9,7 @@
 style | Object | - | 样式 | N
 custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
 animation | Object | - | 动画效果设置。其中 duration 表示动画时长。（单位：秒）。TS 类型：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
+bottom-line-mode | String | fixed | 激活下划线的模式。可选项：fixed/auto/full | N
 middle | Slot | - | 中间内容，介于头部和内容之间。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 show-bottom-line | Boolean | true | 是否展示底部激活线条 | N
 space-evenly | Boolean | true | 选项卡头部空间是否均分 | N
@@ -49,5 +50,6 @@ badge-props | Object | - | 透传至 Badge 组件 | N
 disabled | Boolean | false | 是否禁用当前选项卡 | N
 icon | String / Object | - | `1.0.0-rc.1`。图标，传对象则透传至 Icon | N
 label | String | - | 选项卡名称 | N
+lazy | Boolean | false | 是否启用选项卡懒加载 | N
 panel | String / Slot | - | 用于自定义选项卡面板内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabValue`，[Tabs API Documents](./tabs?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-panel/type.ts) | N
diff --git a/packages/products/tdesign-miniprogram/src/tabs/props.ts b/packages/products/tdesign-miniprogram/src/tabs/props.ts
@@ -10,6 +10,11 @@ const props: TdTabsProps = {
   animation: {
     type: Object,
   },
+  /** 激活下划线的模式 */
+  bottomLineMode: {
+    type: String,
+    value: 'fixed',
+  },
   /** 组件类名，分别用于设置 组件外层元素、选项卡单项、选项卡激活态、滚动条样式类名 等类名 */
   externalClasses: {
     type: Array,

diff --git a/packages/products/tdesign-miniprogram/src/tabs/type.ts b/packages/products/tdesign-miniprogram/src/tabs/type.ts
@@ -14,6 +14,14 @@ export interface TdTabsProps {
     type: ObjectConstructor;
     value?: TabAnimation;
   };
+  /**
+   * 激活下划线的模式
+   * @default fixed
+   */
+  bottomLineMode?: {
+    type: StringConstructor;
+    value?: 'fixed' | 'auto' | 'full';
+  };
   /**
    * 组件类名，分别用于设置 组件外层元素、选项卡单项、选项卡激活态、滚动条样式类名 等类名
    */

diff --git a/packages/scripts/api.json b/packages/scripts/api.json
@@ -112799,7 +112799,8 @@
         "4",
         "8",
         "16",
-        "32"
+        "32",
+        "64"
       ],
       "component": "TabPanel",
       "field_category": 1,
@@ -112832,7 +112833,8 @@
         "Angular(PC)",
         "Vue(Mobile)",
         "React(Mobile)",
-        "Angular(Mobile)"
+        "Angular(Mobile)",
+        "Miniprogram"
       ],
       "field_type_text": [
         "Boolean"
@@ -116116,7 +116118,8 @@
       "id": 1712570553,
       "platform_framework": [
         "8",
-        "16"
+        "16",
+        "64"
       ],
       "component": "Tabs",
       "field_category": 1,
@@ -116145,7 +116148,8 @@
       "field_category_text": "Props",
       "platform_framework_text": [
         "Vue(Mobile)",
-        "React(Mobile)"
+        "React(Mobile)",
+        "Miniprogram"
       ],
       "field_type_text": [
         "String"