From 3a66f602a15e5698beafa54e88933f67a131bb27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Mon, 17 Jun 2024 10:43:24 +0800
Subject: [PATCH] feat(tabs): add scrollPosition API (#3196)

* feat(tabs): add scrollPosition API

* chore: update ssr snapshots
---
 src/tabs/_example-composition/combination.vue |  19 +-
 src/tabs/_example/combination.vue             |  19 +-
 src/tabs/props.ts                             |  13 +-
 src/tabs/tab-nav.tsx                          |   3 +-
 src/tabs/tabs.en-US.md                        |   9 +-
 src/tabs/tabs.md                              |   7 +-
 src/tabs/tabs.tsx                             |   1 +
 src/tabs/type.ts                              |   6 +-
 test/snap/__snapshots__/csr.test.js.snap      | 185 +++++++++++++-----
 test/snap/__snapshots__/ssr.test.js.snap      |   2 +-
 10 files changed, 190 insertions(+), 74 deletions(-)

diff --git a/src/tabs/_example-composition/combination.vue b/src/tabs/_example-composition/combination.vue
index c67d0460d..9e013fd00 100644
--- a/src/tabs/_example-composition/combination.vue
+++ b/src/tabs/_example-composition/combination.vue
@@ -1,12 +1,16 @@
 <template>
   <t-space direction="vertical" style="width: 100%" size="32px">
-    <t-space>
-      <t-radio-group variant="default-filled" v-model="theme">
-        <t-radio-button value="normal">常规型</t-radio-button>
-        <t-radio-button value="card">卡片型</t-radio-button>
-      </t-radio-group>
-    </t-space>
-    <t-tabs v-model="value" :theme="theme">
+    <t-radio-group variant="default-filled" v-model="theme">
+      <t-radio-button value="normal">常规型</t-radio-button>
+      <t-radio-button value="card">卡片型</t-radio-button>
+    </t-radio-group>
+    <t-radio-group variant="default-filled" v-model="scrollPosition">
+      <t-radio-button value="auto">Auto</t-radio-button>
+      <t-radio-button value="start">Start</t-radio-button>
+      <t-radio-button value="center">Center</t-radio-button>
+      <t-radio-button value="end">End</t-radio-button>
+    </t-radio-group>
+    <t-tabs v-model="value" :theme="theme" :scrollPosition="scrollPosition">
       <t-tab-panel v-for="(item, index) in 30" :key="index" :value="index + ''" :label="`选项卡${index + 1}`">
         <p style="padding: 25px">选项卡{{ index + 1 }}</p>
       </t-tab-panel>
@@ -19,4 +23,5 @@ import { ref } from 'vue';
 
 const theme = ref('normal');
 const value = ref('21');
+const scrollPosition = ref('auto');
 </script>
diff --git a/src/tabs/_example/combination.vue b/src/tabs/_example/combination.vue
index 95adcd326..d1484a816 100644
--- a/src/tabs/_example/combination.vue
+++ b/src/tabs/_example/combination.vue
@@ -1,12 +1,16 @@
 <template>
   <t-space direction="vertical" style="width: 100%" size="32px">
-    <t-space>
-      <t-radio-group variant="default-filled" v-model="theme">
-        <t-radio-button value="normal">常规型</t-radio-button>
-        <t-radio-button value="card">卡片型</t-radio-button>
-      </t-radio-group>
-    </t-space>
-    <t-tabs v-model="value" :theme="theme">
+    <t-radio-group variant="default-filled" v-model="theme">
+      <t-radio-button value="normal">常规型</t-radio-button>
+      <t-radio-button value="card">卡片型</t-radio-button>
+    </t-radio-group>
+    <t-radio-group variant="default-filled" v-model="scrollPosition">
+      <t-radio-button value="auto">Auto</t-radio-button>
+      <t-radio-button value="start">Start</t-radio-button>
+      <t-radio-button value="center">Center</t-radio-button>
+      <t-radio-button value="end">End</t-radio-button>
+    </t-radio-group>
+    <t-tabs v-model="value" :theme="theme" :scrollPosition="scrollPosition">
       <t-tab-panel v-for="(item, index) in 30" :key="index" :value="index + ''" :label="`选项卡${index + 1}`">
         <p style="padding: 25px">选项卡{{ index + 1 }}</p>
       </t-tab-panel>
@@ -20,6 +24,7 @@ export default {
     return {
       theme: 'normal',
       value: '21',
+      scrollPosition: 'auto',
     };
   },
 };
diff --git a/src/tabs/props.ts b/src/tabs/props.ts
index b99f00d26..9b5ad2a10 100644
--- a/src/tabs/props.ts
+++ b/src/tabs/props.ts
@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-11-19 10:44:26
  * */
 
 import { TdTabsProps } from './type';
@@ -22,14 +21,25 @@ export default {
     type: String as PropType<TdTabsProps['placement']>,
     default: 'top' as TdTabsProps['placement'],
     validator(val: TdTabsProps['placement']): boolean {
+      if (!val) return true;
       return ['left', 'top', 'bottom', 'right'].includes(val);
     },
   },
+  /** Tab较多的时候，选中滑块滚动最终停留的位置 */
+  scrollPosition: {
+    type: String as PropType<TdTabsProps['scrollPosition']>,
+    default: 'auto' as TdTabsProps['scrollPosition'],
+    validator(val: TdTabsProps['scrollPosition']): boolean {
+      if (!val) return true;
+      return ['auto', 'start', 'center', 'end'].includes(val);
+    },
+  },
   /** 组件尺寸 */
   size: {
     type: String as PropType<TdTabsProps['size']>,
     default: 'medium' as TdTabsProps['size'],
     validator(val: TdTabsProps['size']): boolean {
+      if (!val) return true;
       return ['medium', 'large'].includes(val);
     },
   },
@@ -38,6 +48,7 @@ export default {
     type: String as PropType<TdTabsProps['theme']>,
     default: 'normal' as TdTabsProps['theme'],
     validator(val: TdTabsProps['theme']): boolean {
+      if (!val) return true;
       return ['normal', 'card'].includes(val);
     },
   },
diff --git a/src/tabs/tab-nav.tsx b/src/tabs/tab-nav.tsx
index 8eae16b77..2fb191d84 100644
--- a/src/tabs/tab-nav.tsx
+++ b/src/tabs/tab-nav.tsx
@@ -34,6 +34,7 @@ export default mixins(classPrefixMixins, getGlobalIconMixins()).extend({
     },
     value: tabProps.value,
     placement: tabProps.placement,
+    scrollPosition: tabProps.scrollPosition,
     size: tabProps.size,
     disabled: tabProps.disabled,
     addable: tabProps.addable,
@@ -255,7 +256,7 @@ export default mixins(classPrefixMixins, getGlobalIconMixins()).extend({
             rightOperations: this.$refs.rightOperationsZone as HTMLElement,
           },
           this.scrollLeft,
-          'auto',
+          this.scrollPosition,
         ),
       );
     },
diff --git a/src/tabs/tabs.en-US.md b/src/tabs/tabs.en-US.md
index 4737abea6..fe06090b6 100644
--- a/src/tabs/tabs.en-US.md
+++ b/src/tabs/tabs.en-US.md
@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Tabs Props
 
 name | type | default | description | required
@@ -10,9 +11,10 @@ addable | Boolean | false | \- | N
 disabled | Boolean | false | \- | N
 dragSort | Boolean | false | \- | N
 list | Array | - | Typescript：`Array<TdTabPanelProps>` | N
-placement | String | top | options：left/top/bottom/right | N
-size | String | medium | options：medium/large | N
-theme | String | normal | options：normal/card | N
+placement | String | top | options: left/top/bottom/right | N
+scrollPosition | String | auto | The final position where the tab item stops scrolling after being selected.。options: auto/start/center/end | N
+size | String | medium | options: medium/large | N
+theme | String | normal | options: normal/card | N
 value | String / Number | - | `v-model` is supported。Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tabs/type.ts) | N
 defaultValue | String / Number | - | uncontrolled property。Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tabs/type.ts) | N
 onAdd | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
@@ -29,6 +31,7 @@ change | `(value: TabValue)` | \-
 drag-sort | `(context: TabsDragSortContext)` | trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tabs/type.ts)。<br/>`interface TabsDragSortContext { currentIndex: number; current: TabValue; targetIndex: number; target: TabValue }`<br/>
 remove | `(options: { value: TabValue; index: number; e: MouseEvent })` | \-
 
+
 ### TabPanel Props
 
 name | type | default | description | required
diff --git a/src/tabs/tabs.md b/src/tabs/tabs.md
index 2d150fda2..b334b6135 100644
--- a/src/tabs/tabs.md
+++ b/src/tabs/tabs.md
@@ -1,9 +1,10 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Tabs Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 action | String / Slot / Function | - | 【开发中】选项卡右侧的操作区域。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 addable | Boolean | false | 选项卡是否可增加 | N
@@ -11,6 +12,7 @@ disabled | Boolean | false | 是否禁用选项卡 | N
 dragSort | Boolean | false | 是否开启拖拽调整顺序 | N
 list | Array | - | 选项卡列表。TS 类型：`Array<TdTabPanelProps>` | N
 placement | String | top | 选项卡位置。可选项：left/top/bottom/right | N
+scrollPosition | String | auto | Tab较多的时候，选中滑块滚动最终停留的位置。可选项：auto/start/center/end | N
 size | String | medium | 组件尺寸。可选项：medium/large | N
 theme | String | normal | 选项卡风格，包含 默认风格 和 卡片风格两种。可选项：normal/card | N
 value | String / Number | - | 激活的选项卡值。支持语法糖 `v-model`。TS 类型：`TabValue` `type TabValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tabs/type.ts) | N
@@ -29,9 +31,10 @@ change | `(value: TabValue)` | 激活的选项卡发生变化时触发
 drag-sort | `(context: TabsDragSortContext)` | 拖拽排序时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tabs/type.ts)。<br/>`interface TabsDragSortContext { currentIndex: number; current: TabValue; targetIndex: number; target: TabValue }`<br/>
 remove | `(options: { value: TabValue; index: number; e: MouseEvent })` | 删除选项卡时触发
 
+
 ### TabPanel Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 default | Slot / Function | - | 用于自定义选项卡导航，同 panel。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 destroyOnHide | Boolean | true | 选项卡内容隐藏时是否销毁 | N
diff --git a/src/tabs/tabs.tsx b/src/tabs/tabs.tsx
index 07ea84b65..af81ad1b1 100644
--- a/src/tabs/tabs.tsx
+++ b/src/tabs/tabs.tsx
@@ -101,6 +101,7 @@ export default mixins(Vue as VueConstructor<TabParentInjectVue>, classPrefixMixi
         placement: this.placement,
         addable: this.addable,
         panels: this.panels,
+        scrollPosition: this.scrollPosition,
       };
       return (
         <div
diff --git a/src/tabs/type.ts b/src/tabs/type.ts
index fbc587d55..3f1c73d46 100644
--- a/src/tabs/type.ts
+++ b/src/tabs/type.ts
@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-11-19 10:44:26
  * */
 
 import { TNode } from '../common';
@@ -27,6 +26,11 @@ export interface TdTabsProps {
    * @default top
    */
   placement?: 'left' | 'top' | 'bottom' | 'right';
+  /**
+   * Tab较多的时候，选中滑块滚动最终停留的位置
+   * @default auto
+   */
+  scrollPosition?: 'auto' | 'start' | 'center' | 'end';
   /**
    * 组件尺寸
    * @default medium
diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap
index a85fb3962..df8be2179 100644
--- a/test/snap/__snapshots__/csr.test.js.snap
+++ b/test/snap/__snapshots__/csr.test.js.snap
@@ -102084,61 +102084,144 @@ exports[`csr snapshot test > csr test ./src/tabs/_example/combination.vue 1`] =
     class="t-space-item"
   >
     <div
-      class="t-space t-space-horizontal"
-      style="gap: 16px;"
+      class="t-radio-group t-size-m t-radio-group--filled"
     >
+      <label
+        class="t-radio-button t-is-checked"
+        tabindex="0"
+      >
+        <input
+          class="t-radio-button__former"
+          data-value="'normal'"
+          tabindex="-1"
+          type="radio"
+          value="normal"
+        />
+        <span
+          class="t-radio-button__input"
+        />
+        <span
+          class="t-radio-button__label"
+        >
+          常规型
+        </span>
+      </label>
+      <label
+        class="t-radio-button"
+        tabindex="0"
+      >
+        <input
+          class="t-radio-button__former"
+          data-value="'card'"
+          tabindex="-1"
+          type="radio"
+          value="card"
+        />
+        <span
+          class="t-radio-button__input"
+        />
+        <span
+          class="t-radio-button__label"
+        >
+          卡片型
+        </span>
+      </label>
       <div
-        class="t-space-item"
+        class="t-radio-group__bg-block"
+        style="width: 0px; left: 0px;"
+      />
+    </div>
+  </div>
+  <div
+    class="t-space-item"
+  >
+    <div
+      class="t-radio-group t-size-m t-radio-group--filled"
+    >
+      <label
+        class="t-radio-button t-is-checked"
+        tabindex="0"
       >
-        <div
-          class="t-radio-group t-size-m t-radio-group--filled"
+        <input
+          class="t-radio-button__former"
+          data-value="'auto'"
+          tabindex="-1"
+          type="radio"
+          value="auto"
+        />
+        <span
+          class="t-radio-button__input"
+        />
+        <span
+          class="t-radio-button__label"
         >
-          <label
-            class="t-radio-button t-is-checked"
-            tabindex="0"
-          >
-            <input
-              class="t-radio-button__former"
-              data-value="'normal'"
-              tabindex="-1"
-              type="radio"
-              value="normal"
-            />
-            <span
-              class="t-radio-button__input"
-            />
-            <span
-              class="t-radio-button__label"
-            >
-              常规型
-            </span>
-          </label>
-          <label
-            class="t-radio-button"
-            tabindex="0"
-          >
-            <input
-              class="t-radio-button__former"
-              data-value="'card'"
-              tabindex="-1"
-              type="radio"
-              value="card"
-            />
-            <span
-              class="t-radio-button__input"
-            />
-            <span
-              class="t-radio-button__label"
-            >
-              卡片型
-            </span>
-          </label>
-          <div
-            class="t-radio-group__bg-block"
-            style="width: 0px; left: 0px;"
-          />
-        </div>
-      </div>
+          Auto
+        </span>
+      </label>
+      <label
+        class="t-radio-button"
+        tabindex="0"
+      >
+        <input
+          class="t-radio-button__former"
+          data-value="'start'"
+          tabindex="-1"
+          type="radio"
+          value="start"
+        />
+        <span
+          class="t-radio-button__input"
+        />
+        <span
+          class="t-radio-button__label"
+        >
+          Start
+        </span>
+      </label>
+      <label
+        class="t-radio-button"
+        tabindex="0"
+      >
+        <input
+          class="t-radio-button__former"
+          data-value="'center'"
+          tabindex="-1"
+          type="radio"
+          value="center"
+        />
+        <span
+          class="t-radio-button__input"
+        />
+        <span
+          class="t-radio-button__label"
+        >
+          Center
+        </span>
+      </label>
+      <label
+        class="t-radio-button"
+        tabindex="0"
+      >
+        <input
+          class="t-radio-button__former"
+          data-value="'end'"
+          tabindex="-1"
+          type="radio"
+          value="end"
+        />
+        <span
+          class="t-radio-button__input"
+        />
+        <span
+          class="t-radio-button__label"
+        >
+          End
+        </span>
+      </label>
+      <div
+        class="t-radio-group__bg-block"
+        style="width: 0px; left: 0px;"
+      />
     </div>
   </div>
   <div
diff --git a/test/snap/__snapshots__/ssr.test.js.snap b/test/snap/__snapshots__/ssr.test.js.snap
index 6b332f650..1f3028364 100644
--- a/test/snap/__snapshots__/ssr.test.js.snap
+++ b/test/snap/__snapshots__/ssr.test.js.snap
@@ -1077,7 +1077,7 @@ exports[`ssr snapshot test > renders ./src/tabs/_example/ban.vue correctly 1`] =
 
 exports[`ssr snapshot test > renders ./src/tabs/_example/base.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div class=\\"t-tabs\\"><div class=\\"t-tabs__header t-is-top\\"><div class=\\"t-tabs__nav\\"><div class=\\"t-tabs__operations t-tabs__operations--left\\"><div name=\\"fade\\" mode=\\"out-in\\" appear=\\"true\\"></div></div><div class=\\"t-tabs__operations t-tabs__operations--right\\"><div name=\\"fade\\" mode=\\"out-in\\" appear=\\"true\\"></div></div><div class=\\"t-tabs__nav-container t-is-top\\"><div class=\\"t-tabs__nav-scroll\\"><div class=\\"t-tabs__nav-wrap t-is-smooth\\" style=\\"transform:translate(0px, 0);\\"><div class=\\"t-tabs__bar t-is-top\\"></div></div></div></div></div></div><div class=\\"t-tabs__content\\"><div class=\\"t-tab-panel\\"><p style=\\"padding:25px;\\">选项卡1的内容，使用 t-tab-panel 渲染</p></div><div class=\\"t-tab-panel\\" style=\\"display:none;\\"><p style=\\"padding:25px;\\">选项卡2的内容，使用 t-tab-panel 渲染</p></div><!----></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-tabs\\"><div class=\\"t-tabs__header t-is-top\\"><div class=\\"t-tabs__nav\\"><div class=\\"t-tabs__operations t-tabs__operations--left\\"><div name=\\"fade\\" mode=\\"out-in\\" appear=\\"true\\"></div></div><div class=\\"t-tabs__operations t-tabs__operations--right\\"><div name=\\"fade\\" mode=\\"out-in\\" appear=\\"true\\"></div></div><div class=\\"t-tabs__nav-container t-is-top\\"><div class=\\"t-tabs__nav-scroll\\"><div class=\\"t-tabs__nav-wrap t-is-smooth\\" style=\\"transform:translate(0px, 0);\\"><div class=\\"t-tabs__bar t-is-top\\"></div></div></div></div></div></div><div class=\\"t-tabs__content\\"><div class=\\"t-tab-panel\\"><p style=\\"padding:25px;\\">这是选项卡一的内容，使用 t-tabs 渲染</p></div><!----><!----></div></div></div></div>"`;
 
-exports[`ssr snapshot test > renders ./src/tabs/_example/combination.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-vertical\\" style=\\"gap:32px;width:100%;\\"><div class=\\"t-space-item\\"><div class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\"><input type=\\"radio\\" tabindex=\\"-1\\" data-value=\\"'normal'\\" value=\\"normal\\" checked=\\"checked\\" class=\\"t-radio-button__former\\"><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">常规型</span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" tabindex=\\"-1\\" data-value=\\"'card'\\" value=\\"card\\" class=\\"t-radio-button__former\\"><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">卡片型</span></label><div class=\\"t-radio-group__bg-block\\" style=\\"width:0px;left:0px;\\"></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-tabs\\"><div class=\\"t-tabs__header t-is-top\\"><div class=\\"t-tabs__nav\\"><div class=\\"t-tabs__operations t-tabs__operations--left\\"><div name=\\"fade\\" mode=\\"out-in\\" appear=\\"true\\"></div></div><div class=\\"t-tabs__operations t-tabs__operations--right\\"><div name=\\"fade\\" mode=\\"out-in\\" appear=\\"true\\"></div></div><div class=\\"t-tabs__nav-container t-is-top\\"><div class=\\"t-tabs__nav-scroll\\"><div class=\\"t-tabs__nav-wrap t-is-smooth\\" style=\\"transform:translate(0px, 0);\\"><div class=\\"t-tabs__bar t-is-top\\"></div></div></div></div></div></div><div class=\\"t-tabs__content\\"><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><div class=\\"t-tab-panel\\"><p style=\\"padding:25px;\\">选项卡22</p></div><!----><!----><!----><!----><!----><!----><!----><!----></div></div></div></div>"`;
+exports[`ssr snapshot test > renders ./src/tabs/_example/combination.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-vertical\\" style=\\"gap:32px;width:100%;\\"><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\"><input type=\\"radio\\" tabindex=\\"-1\\" data-value=\\"'normal'\\" value=\\"normal\\" checked=\\"checked\\" class=\\"t-radio-button__former\\"><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">常规型</span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" tabindex=\\"-1\\" data-value=\\"'card'\\" value=\\"card\\" class=\\"t-radio-button__former\\"><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">卡片型</span></label><div class=\\"t-radio-group__bg-block\\" style=\\"width:0px;left:0px;\\"></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\"><input type=\\"radio\\" tabindex=\\"-1\\" data-value=\\"'auto'\\" value=\\"auto\\" checked=\\"checked\\" class=\\"t-radio-button__former\\"><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">Auto</span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" tabindex=\\"-1\\" data-value=\\"'start'\\" value=\\"start\\" class=\\"t-radio-button__former\\"><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">Start</span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" tabindex=\\"-1\\" data-value=\\"'center'\\" value=\\"center\\" class=\\"t-radio-button__former\\"><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">Center</span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" tabindex=\\"-1\\" data-value=\\"'end'\\" value=\\"end\\" class=\\"t-radio-button__former\\"><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">End</span></label><div class=\\"t-radio-group__bg-block\\" style=\\"width:0px;left:0px;\\"></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-tabs\\"><div class=\\"t-tabs__header t-is-top\\"><div class=\\"t-tabs__nav\\"><div class=\\"t-tabs__operations t-tabs__operations--left\\"><div name=\\"fade\\" mode=\\"out-in\\" appear=\\"true\\"></div></div><div class=\\"t-tabs__operations t-tabs__operations--right\\"><div name=\\"fade\\" mode=\\"out-in\\" appear=\\"true\\"></div></div><div class=\\"t-tabs__nav-container t-is-top\\"><div class=\\"t-tabs__nav-scroll\\"><div class=\\"t-tabs__nav-wrap t-is-smooth\\" style=\\"transform:translate(0px, 0);\\"><div class=\\"t-tabs__bar t-is-top\\"></div></div></div></div></div></div><div class=\\"t-tabs__content\\"><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><div class=\\"t-tab-panel\\"><p style=\\"padding:25px;\\">选项卡22</p></div><!----><!----><!----><!----><!----><!----><!----><!----></div></div></div></div>"`;
 
 exports[`ssr snapshot test > renders ./src/tabs/_example/custom.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-tabs\\" style=\\"width:100%;\\"><div class=\\"t-tabs__header t-is-top\\"><div class=\\"t-tabs__nav\\" style=\\"min-height:48px;\\"><div class=\\"t-tabs__operations t-tabs__operations--left\\"><div name=\\"fade\\" mode=\\"out-in\\" appear=\\"true\\"></div></div><div class=\\"t-tabs__operations t-tabs__operations--right\\"><div name=\\"fade\\" mode=\\"out-in\\" appear=\\"true\\"></div><div class=\\"t-tabs__add-btn t-tabs__btn t-size-m\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-add\\"><path fill=\\"currentColor\\" d=\\"M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z\\"></path></svg></div></div><div class=\\"t-tabs__nav-container t-tabs__nav--card t-is-top t-is-addable\\"><div class=\\"t-tabs__nav-scroll\\"><div class=\\"t-tabs__nav-wrap t-is-smooth\\" style=\\"transform:translate(0px, 0);\\"></div></div></div></div></div><div class=\\"t-tabs__content\\"><div class=\\"t-tab-panel\\"><p style=\\"padding:25px;\\">原有选项卡内容</p></div><!----></div></div>"`;