feat(tabs): add split

TDesignOteam · Jan 15, 2025 · 0fbef08 · 0fbef08
1 parent a3e23c0
commit 0fbef08
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 9 deletions.
diff --git a/packages/products/tdesign-mobile-vue/src/tabs/props.ts b/packages/products/tdesign-mobile-vue/src/tabs/props.ts
@@ -25,6 +25,10 @@ export default {
   list: {
     type: Array as PropType<TdTabsProps['list']>,
   },
+  /** 中间内容，介于头部和内容之间 */
+  middle: {
+    type: Function as PropType<TdTabsProps['middle']>,
+  },
   /** 是否展示底部激活线条 */
   showBottomLine: {
     type: Boolean,
@@ -44,6 +48,11 @@ export default {
     type: Boolean,
     default: true,
   },
+  /** 是否展示分割线 */
+  split: {
+    type: Boolean,
+    default: true,
+  },
   /** 是否开启粘性布局 */
   sticky: Boolean,
   /** 透传至 Sticky 组件 */

diff --git a/packages/products/tdesign-mobile-vue/src/tabs/tab-panel-props.ts b/packages/products/tdesign-mobile-vue/src/tabs/tab-panel-props.ts
@@ -19,6 +19,10 @@ export default {
   },
   /** 是否禁用当前选项卡 */
   disabled: Boolean,
+  /** 图标 */
+  icon: {
+    type: Function as PropType<TdTabPanelProps['icon']>,
+  },
   /** 选项卡名称，可自定义选项卡导航内容 */
   label: {
     type: [String, Function] as PropType<TdTabPanelProps['label']>,

diff --git a/packages/products/tdesign-mobile-vue/src/tabs/tabs.en-US.md b/packages/products/tdesign-mobile-vue/src/tabs/tabs.en-US.md
@@ -9,9 +9,11 @@ name | type | default | description | required
 animation | Object | - | Typescript：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
 bottomLineMode | String | fixed | options: fixed/auto/full | N
 list | Array | - | Typescript：`Array<TdTabPanelProps>` | N
+middle | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 showBottomLine | Boolean | true | \- | N
 size | String | medium | options: medium/large | N
 spaceEvenly | Boolean | true | \- | N
+split | Boolean | true | \- | N
 sticky | Boolean | false | \- | N
 stickyProps | Object | - | Typescript：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
 swipeable | Boolean | true | \- | N
@@ -38,6 +40,7 @@ name | type | default | description | required
 badgeProps | Object | - | \- | N
 destroyOnHide | Boolean | true | \- | N
 disabled | Boolean | false | \- | N
+icon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 lazy | Boolean | false | Enable tab lazy loading | N
 panel | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N

diff --git a/packages/products/tdesign-mobile-vue/src/tabs/tabs.md b/packages/products/tdesign-mobile-vue/src/tabs/tabs.md
@@ -9,9 +9,11 @@
 animation | Object | - | 动画效果设置。其中 duration 表示动画时长。TS 类型：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
 bottomLineMode | String | fixed | 激活下划线的模式。可选项：fixed/auto/full | N
 list | Array | - | 选项卡列表。TS 类型：`Array<TdTabPanelProps>` | N
+middle | Slot / Function | - | 中间内容，介于头部和内容之间。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 showBottomLine | Boolean | true | 是否展示底部激活线条 | N
 size | String | medium | 组件尺寸。可选项：medium/large | N
 spaceEvenly | Boolean | true | 选项卡头部空间是否均分 | N
+split | Boolean | true | 是否展示分割线 | N
 sticky | Boolean | false | 是否开启粘性布局 | N
 stickyProps | Object | - | 透传至 Sticky 组件。TS 类型：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
 swipeable | Boolean | true | 是否可以滑动切换 | N
@@ -38,6 +40,7 @@ scroll | `(scrollTop: number, isFixed: boolean)` | 页面滚动时触发
 badgeProps | Object | - | 透传至 Badge 组件 | N
 destroyOnHide | Boolean | true | 选项卡内容隐藏时是否销毁 | N
 disabled | Boolean | false | 是否禁用当前选项卡 | N
+icon | Slot / Function | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 label | String / Slot / Function | - | 选项卡名称，可自定义选项卡导航内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 lazy | Boolean | false | 是否启用选项卡懒加载 | N
 panel | String / Slot / Function | - | 用于自定义选项卡面板内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N

diff --git a/packages/products/tdesign-mobile-vue/src/tabs/type.ts b/packages/products/tdesign-mobile-vue/src/tabs/type.ts
@@ -21,6 +21,10 @@ export interface TdTabsProps {
    * 选项卡列表
    */
   list?: Array<TdTabPanelProps>;
+  /**
+   * 中间内容，介于头部和内容之间
+   */
+  middle?: TNode;
   /**
    * 是否展示底部激活线条
    * @default true
@@ -36,6 +40,11 @@ export interface TdTabsProps {
    * @default true
    */
   spaceEvenly?: boolean;
+  /**
+   * 是否展示分割线
+   * @default true
+   */
+  split?: boolean;
   /**
    * 是否开启粘性布局
    * @default false
@@ -96,6 +105,10 @@ export interface TdTabPanelProps {
    * @default false
    */
   disabled?: boolean;
+  /**
+   * 图标
+   */
+  icon?: TNode;
   /**
    * 选项卡名称，可自定义选项卡导航内容
    */

diff --git a/packages/scripts/api.json b/packages/scripts/api.json
@@ -111957,7 +111957,7 @@
       ]
     },
     {
-      "id": 1736959232,
+      "id": 1736961692,
       "platform_framework": [
         "8"
       ],
@@ -111973,8 +111973,8 @@
       "field_desc_en": null,
       "field_required": 0,
       "event_input": "",
-      "create_time": "2025-01-15 16:40:32",
-      "update_time": "2025-01-15 16:40:32",
+      "create_time": "2025-01-15 17:21:32",
+      "update_time": "2025-01-15 17:21:32",
       "event_output": null,
       "custom_field_type": null,
       "syntactic_sugar": null,
@@ -115647,7 +115647,7 @@
       ]
     },
     {
-      "id": 1736958919,
+      "id": 1736961674,
       "platform_framework": [
         "8"
       ],
@@ -115663,8 +115663,8 @@
       "field_desc_en": null,
       "field_required": 0,
       "event_input": "",
-      "create_time": "2025-01-15 16:35:19",
-      "update_time": "2025-01-15 16:35:19",
+      "create_time": "2025-01-15 17:21:14",
+      "update_time": "2025-01-15 17:21:14",
       "event_output": null,
       "custom_field_type": null,
       "syntactic_sugar": null,
@@ -115969,7 +115969,7 @@
       ]
     },
     {
-      "id": 1736957554,
+      "id": 1736961649,
       "platform_framework": [
         "8"
       ],
@@ -115985,8 +115985,8 @@
       "field_desc_en": null,
       "field_required": 0,
       "event_input": "",
-      "create_time": "2025-01-15 16:12:34",
-      "update_time": "2025-01-15 16:12:34",
+      "create_time": "2025-01-15 17:20:49",
+      "update_time": "2025-01-15 17:20:49",
       "event_output": null,
       "custom_field_type": null,
       "syntactic_sugar": null,