feat(Tabs): add shrink prop (#10125)

packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap

@@ -82,7 +82,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
       >
         <div id="van-tabs-0"
              role="tab"
-             class="van-tab van-cascader__tab"
+             class="van-tab van-tab--line van-cascader__tab"
              tabindex="-1"
              aria-selected="false"
         >
@@ -92,7 +92,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
         </div>
         <div id="van-tabs-1"
              role="tab"
-             class="van-tab van-tab--active van-cascader__tab van-cascader__tab--unselected"
+             class="van-tab van-tab--line van-tab--active van-cascader__tab van-cascader__tab--unselected"
              tabindex="0"
              aria-selected="true"
         >

packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap

@@ -33,7 +33,7 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
       >
         <div id="van-tabs-0"
              role="tab"
-             class="van-tab van-tab--active"
+             class="van-tab van-tab--line van-tab--active"
              tabindex="0"
              aria-selected="true"
              aria-controls="van-tab"
@@ -44,7 +44,7 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
         </div>
         <div id="van-tabs-1"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -325,7 +325,7 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
       >
         <div id="van-tabs-0"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -336,7 +336,7 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
         </div>
         <div id="van-tabs-1"
              role="tab"
-             class="van-tab van-tab--active"
+             class="van-tab van-tab--line van-tab--active"
              tabindex="0"
              aria-selected="true"
              aria-controls="van-tab"
@@ -437,7 +437,7 @@ exports[`should render list-footer slot correctly 1`] = `
       >
         <div id="van-tabs-0"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -448,7 +448,7 @@ exports[`should render list-footer slot correctly 1`] = `
         </div>
         <div id="van-tabs-1"
              role="tab"
-             class="van-tab van-tab--active"
+             class="van-tab van-tab--line van-tab--active"
              tabindex="0"
              aria-selected="true"
              aria-controls="van-tab"
@@ -551,7 +551,7 @@ exports[`should use custom src when using empty-image prop 1`] = `
       >
         <div id="van-tabs-0"
              role="tab"
-             class="van-tab van-tab--active"
+             class="van-tab van-tab--line van-tab--active"
              tabindex="0"
              aria-selected="true"
              aria-controls="van-tab"
@@ -562,7 +562,7 @@ exports[`should use custom src when using empty-image prop 1`] = `
         </div>
         <div id="van-tabs-1"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"

packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap

@@ -20,7 +20,7 @@ exports[`should render demo and match snapshot 1`] = `
       >
         <div id="van-tabs-0"
              role="tab"
-             class="van-tab van-tab--active"
+             class="van-tab van-tab--line van-tab--active"
              tabindex="0"
              aria-selected="true"
              aria-controls="van-tab"
@@ -31,7 +31,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-1"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -42,7 +42,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-2"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"

packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap

@@ -11,7 +11,7 @@ exports[`should render demo and match snapshot 1`] = `
         >
           <div id="van-tabs-0"
                role="tab"
-               class="van-tab van-tab--active"
+               class="van-tab van-tab--line van-tab--active"
                tabindex="0"
                aria-selected="true"
                aria-controls="van-tab"
@@ -22,7 +22,7 @@ exports[`should render demo and match snapshot 1`] = `
           </div>
           <div id="van-tabs-1"
                role="tab"
-               class="van-tab"
+               class="van-tab van-tab--line"
                tabindex="-1"
                aria-selected="false"
                aria-controls="van-tab"
@@ -33,7 +33,7 @@ exports[`should render demo and match snapshot 1`] = `
           </div>
           <div id="van-tabs-2"
                role="tab"
-               class="van-tab"
+               class="van-tab van-tab--line"
                tabindex="-1"
                aria-selected="false"
                aria-controls="van-tab"
@@ -44,7 +44,7 @@ exports[`should render demo and match snapshot 1`] = `
           </div>
           <div id="van-tabs-3"
                role="tab"
-               class="van-tab"
+               class="van-tab van-tab--line"
                tabindex="-1"
                aria-selected="false"
                aria-controls="van-tab"

packages/vant/src/index-bar/test/__snapshots__/demo.spec.ts.snap

@@ -9,7 +9,7 @@ exports[`should render demo and match snapshot 1`] = `
     >
       <div id="van-tabs-0"
            role="tab"
-           class="van-tab van-tab--active"
+           class="van-tab van-tab--line van-tab--active"
            tabindex="0"
            aria-selected="true"
            aria-controls="van-tab"
@@ -20,7 +20,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tabs-1"
            role="tab"
-           class="van-tab"
+           class="van-tab van-tab--line"
            tabindex="-1"
            aria-selected="false"
            aria-controls="van-tab"

packages/vant/src/list/test/__snapshots__/demo.spec.ts.snap

@@ -9,7 +9,7 @@ exports[`should render demo and match snapshot 1`] = `
     >
       <div id="van-tabs-0"
            role="tab"
-           class="van-tab van-tab--active"
+           class="van-tab van-tab--line van-tab--active"
            tabindex="0"
            aria-selected="true"
            aria-controls="van-tab"
@@ -20,7 +20,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tabs-1"
            role="tab"
-           class="van-tab"
+           class="van-tab van-tab--line"
            tabindex="-1"
            aria-selected="false"
            aria-controls="van-tab"
@@ -31,7 +31,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tabs-2"
            role="tab"
-           class="van-tab"
+           class="van-tab van-tab--line"
            tabindex="-1"
            aria-selected="false"
            aria-controls="van-tab"

packages/vant/src/pull-refresh/test/__snapshots__/demo.spec.ts.snap

@@ -9,7 +9,7 @@ exports[`should render demo and match snapshot 1`] = `
     >
       <div id="van-tabs-0"
            role="tab"
-           class="van-tab van-tab--active"
+           class="van-tab van-tab--line van-tab--active"
            tabindex="0"
            aria-selected="true"
            aria-controls="van-tab"
@@ -20,7 +20,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tabs-1"
            role="tab"
-           class="van-tab"
+           class="van-tab van-tab--line"
            tabindex="-1"
            aria-selected="false"
            aria-controls="van-tab"
@@ -31,7 +31,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tabs-2"
            role="tab"
-           class="van-tab"
+           class="van-tab van-tab--line"
            tabindex="-1"
            aria-selected="false"
            aria-controls="van-tab"

packages/vant/src/tab/README.md

@@ -124,7 +124,7 @@ export default {
 
 ### Sticky
 
-In sticky mode, the tab will be fixed to top when scroll to top.
+In sticky mode, the tab nav will be fixed to top when scroll to top.
 
 ```html
 <van-tabs v-model:active="active" sticky>
@@ -134,6 +134,18 @@ In sticky mode, the tab will be fixed to top when scroll to top.
 </van-tabs>
 ```
 
+### Shrink
+
+In shrink mode, the tabs will be shrinked to the left.
+
+```html
+<van-tabs v-model:active="active" shrink>
+  <van-tab v-for="index in 4" :title="'tab ' + index">
+    content {{ index }}
+  </van-tab>
+</van-tabs>
+```
+
 ### Custom title
 
 Use title slot to custom tab title.
@@ -236,6 +248,7 @@ export default {
 | border | Whether to show border when `type="line"` | _boolean_ | `false` |
 | ellipsis | Whether to ellipsis too long title | _boolean_ | `true` |
 | sticky | Whether to use sticky mode | _boolean_ | `false` |
+| shrink `v3.2.8` | Whether to shrink the the tabs to the left | _boolean_ | `false` |
 | swipeable | Whether to enable gestures to slide left and right | _boolean_ | `false` |
 | lazy-render | Whether to enable tab content lazy render | _boolean_ | `true` |
 | scrollspy | Whether to use scrollspy mode | _boolean_ | `false` |

packages/vant/src/tab/README.zh-CN.md

@@ -143,6 +143,18 @@ export default {
 
 > Tips: 如果页面顶部有其他内容，可以通过 offset-top 属性设置吸顶时与顶部的距离。
 
+### 收缩布局
+
+通过 `shrink` 属性可以开启收缩布局，开启后，所有的标签会向左侧收缩对齐。
+
+```html
+<van-tabs v-model:active="active" shrink>
+  <van-tab v-for="index in 4" :title="'选项 ' + index">
+    内容 {{ index }}
+  </van-tab>
+</van-tabs>
+```
+
 ### 自定义标签
 
 通过 `title` 插槽可以自定义标签内容。
@@ -249,6 +261,7 @@ export default {
 | border | 是否显示标签栏外边框，仅在 `type="line"` 时有效 | _boolean_ | `false` |
 | ellipsis | 是否省略过长的标题文字 | _boolean_ | `true` |
 | sticky | 是否使用粘性布局 | _boolean_ | `false` |
+| shrink `v3.2.8` | 是否开启左侧收缩布局 | _boolean_ | `false` |
 | swipeable | 是否开启手势左右滑动切换 | _boolean_ | `false` |
 | lazy-render | 是否开启延迟渲染（首次切换到标签时才触发内容渲染） | _boolean_ | `true` |
 | scrollspy | 是否开启滚动导航 | _boolean_ | `false` |

packages/vant/src/tab/demo/Shrink.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import VanTabs from '../../tabs';
+import VanTab from '..';
+import { useTranslate } from '../../../docs/site/use-translate';
+
+const t = useTranslate({
+  'zh-CN': {
+    tab: '标签 ',
+    shrink: '收缩布局',
+  },
+  'en-US': {
+    tab: 'Tab ',
+    shrink: 'Shrink',
+  },
+});
+
+const tabs = [1, 2, 3, 4];
+const active1 = ref(0);
+const active2 = ref(0);
+</script>
+
+<template>
+  <demo-block :title="t('shrink')">
+    <van-tabs v-model:active="active1" shrink>
+      <van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
+        {{ t('content') }} {{ index }}
+      </van-tab>
+    </van-tabs>
+    <van-tabs
+      v-model:active="active2"
+      type="card"
+      shrink
+      style="margin-top: var(--van-padding-lg)"
+    >
+      <van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
+        {{ t('content') }} {{ index }}
+      </van-tab>
+    </van-tabs>
+  </demo-block>
+</template>

packages/vant/src/tab/demo/index.vue

@@ -5,6 +5,7 @@ import VanIcon from '../../icon';
 import { ref } from 'vue';
 import { useTranslate } from '../../../docs/site/use-translate';
 import { Toast } from '../../toast';
+import Shrink from './Shrink.vue';
 
 const t = useTranslate({
   'zh-CN': {
@@ -131,6 +132,8 @@ const beforeChange = (name: number) => {
     </van-tabs>
   </demo-block>
 
+  <shrink />
+
   <demo-block :title="t('title7')">
     <van-tabs v-model:active="active7">
       <van-tab v-for="index in 2" :key="index">

packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap

@@ -10,7 +10,7 @@ exports[`should render demo and match snapshot 1`] = `
       >
         <div id="van-tabs-0"
              role="tab"
-             class="van-tab van-tab--active"
+             class="van-tab van-tab--line van-tab--active"
              tabindex="0"
              aria-selected="true"
              aria-controls="van-tab"
@@ -21,7 +21,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-1"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -32,7 +32,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-2"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -43,7 +43,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-3"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -104,7 +104,7 @@ exports[`should render demo and match snapshot 1`] = `
       >
         <div id="van-tabs-0"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -115,7 +115,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-1"
              role="tab"
-             class="van-tab van-tab--active"
+             class="van-tab van-tab--line van-tab--active"
              tabindex="0"
              aria-selected="true"
              aria-controls="van-tab"
@@ -126,7 +126,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-2"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -179,7 +179,7 @@ exports[`should render demo and match snapshot 1`] = `
       >
         <div id="van-tabs-0"
              role="tab"
-             class="van-tab van-tab--active"
+             class="van-tab van-tab--line van-tab--active"
              tabindex="0"
              aria-selected="true"
              aria-controls="van-tab"
@@ -190,7 +190,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-1"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -201,7 +201,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-2"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -212,7 +212,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-3"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -223,7 +223,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-4"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -234,7 +234,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-5"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -245,7 +245,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-6"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -256,7 +256,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-7"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -349,7 +349,7 @@ exports[`should render demo and match snapshot 1`] = `
       >
         <div id="van-tabs-0"
              role="tab"
-             class="van-tab van-tab--active"
+             class="van-tab van-tab--line van-tab--active"
              tabindex="0"
              aria-selected="true"
              aria-controls="van-tab"
@@ -360,7 +360,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-1"
              role="tab"
-             class="van-tab van-tab--disabled"
+             class="van-tab van-tab--line van-tab--disabled"
              aria-selected="false"
              aria-disabled="true"
              aria-controls="van-tab"
@@ -371,7 +371,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-2"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -424,7 +424,7 @@ exports[`should render demo and match snapshot 1`] = `
       >
         <div id="van-tabs-0"
              role="tab"
-             class="van-tab van-tab--active"
+             class="van-tab van-tab--card van-tab--active"
              tabindex="0"
              aria-selected="true"
              aria-controls="van-tab"
@@ -435,7 +435,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-1"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--card"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -446,7 +446,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-2"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--card"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -495,7 +495,7 @@ exports[`should render demo and match snapshot 1`] = `
       >
         <div id="van-tabs-0"
              role="tab"
-             class="van-tab van-tab--active"
+             class="van-tab van-tab--line van-tab--active"
              tabindex="0"
              aria-selected="true"
              aria-controls="van-tab"
@@ -506,7 +506,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-1"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -553,7 +553,7 @@ exports[`should render demo and match snapshot 1`] = `
           >
             <div id="van-tabs-0"
                  role="tab"
-                 class="van-tab van-tab--active"
+                 class="van-tab van-tab--line van-tab--active"
                  tabindex="0"
                  aria-selected="true"
                  aria-controls="van-tab"
@@ -564,7 +564,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div id="van-tabs-1"
                  role="tab"
-                 class="van-tab"
+                 class="van-tab van-tab--line"
                  tabindex="-1"
                  aria-selected="false"
                  aria-controls="van-tab"
@@ -575,7 +575,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div id="van-tabs-2"
                  role="tab"
-                 class="van-tab"
+                 class="van-tab van-tab--line"
                  tabindex="-1"
                  aria-selected="false"
                  aria-controls="van-tab"
@@ -586,7 +586,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div id="van-tabs-3"
                  role="tab"
-                 class="van-tab"
+                 class="van-tab van-tab--line"
                  tabindex="-1"
                  aria-selected="false"
                  aria-controls="van-tab"
@@ -640,6 +640,188 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
 </div>
+<div>
+  <div class="van-tabs van-tabs--line">
+    <div class="van-tabs__wrap">
+      <div role="tablist"
+           class="van-tabs__nav van-tabs__nav--line van-tabs__nav--shrink"
+           aria-orientation="horizontal"
+      >
+        <div id="van-tabs-0"
+             role="tab"
+             class="van-tab van-tab--line van-tab--shrink van-tab--active"
+             tabindex="0"
+             aria-selected="true"
+             aria-controls="van-tab"
+        >
+          <span class="van-tab__text van-tab__text--ellipsis">
+            Tab 1
+          </span>
+        </div>
+        <div id="van-tabs-1"
+             role="tab"
+             class="van-tab van-tab--line van-tab--shrink"
+             tabindex="-1"
+             aria-selected="false"
+             aria-controls="van-tab"
+        >
+          <span class="van-tab__text van-tab__text--ellipsis">
+            Tab 2
+          </span>
+        </div>
+        <div id="van-tabs-2"
+             role="tab"
+             class="van-tab van-tab--line van-tab--shrink"
+             tabindex="-1"
+             aria-selected="false"
+             aria-controls="van-tab"
+        >
+          <span class="van-tab__text van-tab__text--ellipsis">
+            Tab 3
+          </span>
+        </div>
+        <div id="van-tabs-3"
+             role="tab"
+             class="van-tab van-tab--line van-tab--shrink"
+             tabindex="-1"
+             aria-selected="false"
+             aria-controls="van-tab"
+        >
+          <span class="van-tab__text van-tab__text--ellipsis">
+            Tab 4
+          </span>
+        </div>
+        <div class="van-tabs__line"
+             style="transform: translateX(50px) translateX(-50%);"
+        >
+        </div>
+      </div>
+    </div>
+    <div class="van-tabs__content">
+      <div id="van-tab"
+           role="tabpanel"
+           class="van-tab__panel"
+           tabindex="0"
+           aria-labelledby="van-tabs-0"
+           style
+      >
+        Content 1
+      </div>
+      <div id="van-tab"
+           role="tabpanel"
+           class="van-tab__panel"
+           tabindex="-1"
+           aria-labelledby="van-tabs-1"
+           style="display: none;"
+      >
+      </div>
+      <div id="van-tab"
+           role="tabpanel"
+           class="van-tab__panel"
+           tabindex="-1"
+           aria-labelledby="van-tabs-2"
+           style="display: none;"
+      >
+      </div>
+      <div id="van-tab"
+           role="tabpanel"
+           class="van-tab__panel"
+           tabindex="-1"
+           aria-labelledby="van-tabs-3"
+           style="display: none;"
+      >
+      </div>
+    </div>
+  </div>
+  <div class="van-tabs van-tabs--card">
+    <div class="van-tabs__wrap">
+      <div role="tablist"
+           class="van-tabs__nav van-tabs__nav--card van-tabs__nav--shrink"
+           aria-orientation="horizontal"
+      >
+        <div id="van-tabs-0"
+             role="tab"
+             class="van-tab van-tab--card van-tab--shrink van-tab--active"
+             tabindex="0"
+             aria-selected="true"
+             aria-controls="van-tab"
+        >
+          <span class="van-tab__text van-tab__text--ellipsis">
+            Tab 1
+          </span>
+        </div>
+        <div id="van-tabs-1"
+             role="tab"
+             class="van-tab van-tab--card van-tab--shrink"
+             tabindex="-1"
+             aria-selected="false"
+             aria-controls="van-tab"
+        >
+          <span class="van-tab__text van-tab__text--ellipsis">
+            Tab 2
+          </span>
+        </div>
+        <div id="van-tabs-2"
+             role="tab"
+             class="van-tab van-tab--card van-tab--shrink"
+             tabindex="-1"
+             aria-selected="false"
+             aria-controls="van-tab"
+        >
+          <span class="van-tab__text van-tab__text--ellipsis">
+            Tab 3
+          </span>
+        </div>
+        <div id="van-tabs-3"
+             role="tab"
+             class="van-tab van-tab--card van-tab--shrink"
+             tabindex="-1"
+             aria-selected="false"
+             aria-controls="van-tab"
+        >
+          <span class="van-tab__text van-tab__text--ellipsis">
+            Tab 4
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="van-tabs__content">
+      <div id="van-tab"
+           role="tabpanel"
+           class="van-tab__panel"
+           tabindex="0"
+           aria-labelledby="van-tabs-0"
+           style
+      >
+        Content 1
+      </div>
+      <div id="van-tab"
+           role="tabpanel"
+           class="van-tab__panel"
+           tabindex="-1"
+           aria-labelledby="van-tabs-1"
+           style="display: none;"
+      >
+      </div>
+      <div id="van-tab"
+           role="tabpanel"
+           class="van-tab__panel"
+           tabindex="-1"
+           aria-labelledby="van-tabs-2"
+           style="display: none;"
+      >
+      </div>
+      <div id="van-tab"
+           role="tabpanel"
+           class="van-tab__panel"
+           tabindex="-1"
+           aria-labelledby="van-tabs-3"
+           style="display: none;"
+      >
+      </div>
+    </div>
+  </div>
+</div>
 <div>
   <div class="van-tabs van-tabs--line">
     <div class="van-tabs__wrap">
@@ -649,7 +831,7 @@ exports[`should render demo and match snapshot 1`] = `
       >
         <div id="van-tabs-0"
              role="tab"
-             class="van-tab van-tab--active"
+             class="van-tab van-tab--line van-tab--active"
              tabindex="0"
              aria-selected="true"
              aria-controls="van-tab"
@@ -662,7 +844,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-1"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -709,7 +891,7 @@ exports[`should render demo and match snapshot 1`] = `
       >
         <div id="van-tabs-0"
              role="tab"
-             class="van-tab van-tab--active"
+             class="van-tab van-tab--line van-tab--active"
              tabindex="0"
              aria-selected="true"
         >
@@ -719,7 +901,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-1"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
         >
@@ -729,7 +911,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-2"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
         >
@@ -739,7 +921,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-3"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
         >
@@ -814,7 +996,7 @@ exports[`should render demo and match snapshot 1`] = `
       >
         <div id="van-tabs-0"
              role="tab"
-             class="van-tab van-tab--active"
+             class="van-tab van-tab--line van-tab--active"
              tabindex="0"
              aria-selected="true"
         >
@@ -824,7 +1006,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-1"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
         >
@@ -834,7 +1016,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-2"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
         >
@@ -844,7 +1026,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-3"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
         >
@@ -921,7 +1103,7 @@ exports[`should render demo and match snapshot 1`] = `
           >
             <div id="van-tabs-0"
                  role="tab"
-                 class="van-tab van-tab--active"
+                 class="van-tab van-tab--line van-tab--active"
                  tabindex="0"
                  aria-selected="true"
                  aria-controls="van-tab"
@@ -932,7 +1114,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div id="van-tabs-1"
                  role="tab"
-                 class="van-tab"
+                 class="van-tab van-tab--line"
                  tabindex="-1"
                  aria-selected="false"
                  aria-controls="van-tab"
@@ -943,7 +1125,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div id="van-tabs-2"
                  role="tab"
-                 class="van-tab"
+                 class="van-tab van-tab--line"
                  tabindex="-1"
                  aria-selected="false"
                  aria-controls="van-tab"
@@ -954,7 +1136,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div id="van-tabs-3"
                  role="tab"
-                 class="van-tab"
+                 class="van-tab van-tab--line"
                  tabindex="-1"
                  aria-selected="false"
                  aria-controls="van-tab"
@@ -965,7 +1147,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div id="van-tabs-4"
                  role="tab"
-                 class="van-tab"
+                 class="van-tab van-tab--line"
                  tabindex="-1"
                  aria-selected="false"
                  aria-controls="van-tab"
@@ -976,7 +1158,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div id="van-tabs-5"
                  role="tab"
-                 class="van-tab"
+                 class="van-tab van-tab--line"
                  tabindex="-1"
                  aria-selected="false"
                  aria-controls="van-tab"
@@ -987,7 +1169,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div id="van-tabs-6"
                  role="tab"
-                 class="van-tab"
+                 class="van-tab van-tab--line"
                  tabindex="-1"
                  aria-selected="false"
                  aria-controls="van-tab"
@@ -998,7 +1180,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div id="van-tabs-7"
                  role="tab"
-                 class="van-tab"
+                 class="van-tab van-tab--line"
                  tabindex="-1"
                  aria-selected="false"
                  aria-controls="van-tab"
@@ -1092,7 +1274,7 @@ exports[`should render demo and match snapshot 1`] = `
       >
         <div id="van-tabs-0"
              role="tab"
-             class="van-tab van-tab--active"
+             class="van-tab van-tab--line van-tab--active"
              tabindex="0"
              aria-selected="true"
              aria-controls="van-tab"
@@ -1103,7 +1285,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-1"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -1114,7 +1296,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-2"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"
@@ -1125,7 +1307,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div id="van-tabs-3"
              role="tab"
-             class="van-tab"
+             class="van-tab van-tab--line"
              tabindex="-1"
              aria-selected="false"
              aria-controls="van-tab"

packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap

@@ -53,7 +53,7 @@ exports[`should allow to set name prop 1`] = `
     >
       <div id="van-tabs-0"
            role="tab"
-           class="van-tab van-tab--active"
+           class="van-tab van-tab--line van-tab--active"
            tabindex="0"
            aria-selected="true"
            aria-controls="van-tab"
@@ -64,7 +64,7 @@ exports[`should allow to set name prop 1`] = `
       </div>
       <div id="van-tabs-1"
            role="tab"
-           class="van-tab"
+           class="van-tab van-tab--line"
            tabindex="-1"
            aria-selected="false"
            aria-controls="van-tab"
@@ -75,7 +75,7 @@ exports[`should allow to set name prop 1`] = `
       </div>
       <div id="van-tabs-2"
            role="tab"
-           class="van-tab van-tab--disabled"
+           class="van-tab van-tab--line van-tab--disabled"
            aria-selected="false"
            aria-disabled="true"
            aria-controls="van-tab"
@@ -140,7 +140,7 @@ exports[`should not render empty tab 1`] = `
 exports[`should render badge prop correctly 1`] = `
 <div id="van-tabs-0"
      role="tab"
-     class="van-tab van-tab--active"
+     class="van-tab van-tab--line van-tab--active"
      tabindex="0"
      aria-selected="true"
      aria-controls="van-tab"
@@ -164,7 +164,7 @@ exports[`should render nav-left、nav-right slot correctly 1`] = `
     Custom nav left
     <div id="van-tabs-0"
          role="tab"
-         class="van-tab van-tab--active"
+         class="van-tab van-tab--line van-tab--active"
          tabindex="0"
          aria-selected="true"
          aria-controls="van-tab"
@@ -191,7 +191,7 @@ exports[`should switch tab after click the tab title 1`] = `
     >
       <div id="van-tabs-0"
            role="tab"
-           class="van-tab van-tab--active"
+           class="van-tab van-tab--line van-tab--active"
            tabindex="0"
            aria-selected="true"
            aria-controls="van-tab"
@@ -202,7 +202,7 @@ exports[`should switch tab after click the tab title 1`] = `
       </div>
       <div id="van-tabs-1"
            role="tab"
-           class="van-tab"
+           class="van-tab van-tab--line"
            tabindex="-1"
            aria-selected="false"
            aria-controls="van-tab"
@@ -213,7 +213,7 @@ exports[`should switch tab after click the tab title 1`] = `
       </div>
       <div id="van-tabs-2"
            role="tab"
-           class="van-tab van-tab--disabled"
+           class="van-tab van-tab--line van-tab--disabled"
            aria-selected="false"
            aria-disabled="true"
            aria-controls="van-tab"
@@ -267,7 +267,7 @@ exports[`should switch tab after click the tab title 2`] = `
     >
       <div id="van-tabs-0"
            role="tab"
-           class="van-tab"
+           class="van-tab van-tab--line"
            tabindex="-1"
            aria-selected="false"
            aria-controls="van-tab"
@@ -278,7 +278,7 @@ exports[`should switch tab after click the tab title 2`] = `
       </div>
       <div id="van-tabs-1"
            role="tab"
-           class="van-tab van-tab--active"
+           class="van-tab van-tab--line van-tab--active"
            tabindex="0"
            aria-selected="true"
            aria-controls="van-tab"
@@ -289,7 +289,7 @@ exports[`should switch tab after click the tab title 2`] = `
       </div>
       <div id="van-tabs-2"
            role="tab"
-           class="van-tab van-tab--disabled"
+           class="van-tab van-tab--line van-tab--disabled"
            aria-selected="false"
            aria-disabled="true"
            aria-controls="van-tab"
@@ -344,7 +344,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
     >
       <div id="van-tabs-0"
            role="tab"
-           class="van-tab van-tab--active"
+           class="van-tab van-tab--line van-tab--active"
            tabindex="0"
            aria-selected="true"
       >
@@ -354,7 +354,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
       </div>
       <div id="van-tabs-1"
            role="tab"
-           class="van-tab"
+           class="van-tab van-tab--line"
            tabindex="-1"
            aria-selected="false"
       >
@@ -364,7 +364,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
       </div>
       <div id="van-tabs-2"
            role="tab"
-           class="van-tab van-tab--disabled"
+           class="van-tab van-tab--line van-tab--disabled"
            aria-selected="false"
            aria-disabled="true"
       >
@@ -431,7 +431,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
     >
       <div id="van-tabs-0"
            role="tab"
-           class="van-tab"
+           class="van-tab van-tab--line"
            tabindex="-1"
            aria-selected="false"
       >
@@ -441,7 +441,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
       </div>
       <div id="van-tabs-1"
            role="tab"
-           class="van-tab van-tab--active"
+           class="van-tab van-tab--line van-tab--active"
            tabindex="0"
            aria-selected="true"
       >
@@ -451,7 +451,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
       </div>
       <div id="van-tabs-2"
            role="tab"
-           class="van-tab van-tab--disabled"
+           class="van-tab van-tab--line van-tab--disabled"
            aria-selected="false"
            aria-disabled="true"
       >
@@ -521,7 +521,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
     >
       <div id="van-tabs-0"
            role="tab"
-           class="van-tab"
+           class="van-tab van-tab--line"
            tabindex="-1"
            aria-selected="false"
       >
@@ -531,7 +531,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
       </div>
       <div id="van-tabs-1"
            role="tab"
-           class="van-tab van-tab--active"
+           class="van-tab van-tab--line van-tab--active"
            tabindex="0"
            aria-selected="true"
       >
@@ -541,7 +541,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
       </div>
       <div id="van-tabs-2"
            role="tab"
-           class="van-tab van-tab--disabled"
+           class="van-tab van-tab--line van-tab--disabled"
            aria-selected="false"
            aria-disabled="true"
       >

packages/vant/src/tab/test/__snapshots__/insert.spec.tsx.snap

@@ -9,7 +9,7 @@ exports[`should render Tab inside a component correctly 1`] = `
     >
       <div id="van-tabs-0"
            role="tab"
-           class="van-tab"
+           class="van-tab van-tab--line"
            tabindex="-1"
            aria-selected="false"
            aria-controls="van-tab"
@@ -20,7 +20,7 @@ exports[`should render Tab inside a component correctly 1`] = `
       </div>
       <div id="van-tabs-1"
            role="tab"
-           class="van-tab van-tab--active"
+           class="van-tab van-tab--line van-tab--active"
            tabindex="0"
            aria-selected="true"
            aria-controls="van-tab"
@@ -31,7 +31,7 @@ exports[`should render Tab inside a component correctly 1`] = `
       </div>
       <div id="van-tabs-2"
            role="tab"
-           class="van-tab"
+           class="van-tab van-tab--line"
            tabindex="-1"
            aria-selected="false"
            aria-controls="van-tab"
@@ -85,7 +85,7 @@ exports[`should render correctly after inserting a tab 1`] = `
     >
       <div id="van-tabs-0"
            role="tab"
-           class="van-tab"
+           class="van-tab van-tab--line"
            tabindex="-1"
            aria-selected="false"
            aria-controls="van-tab"
@@ -96,7 +96,7 @@ exports[`should render correctly after inserting a tab 1`] = `
       </div>
       <div id="van-tabs-1"
            role="tab"
-           class="van-tab van-tab--active"
+           class="van-tab van-tab--line van-tab--active"
            tabindex="0"
            aria-selected="true"
            aria-controls="van-tab"
@@ -107,7 +107,7 @@ exports[`should render correctly after inserting a tab 1`] = `
       </div>
       <div id="van-tabs-2"
            role="tab"
-           class="van-tab"
+           class="van-tab van-tab--line"
            tabindex="-1"
            aria-selected="false"
            aria-controls="van-tab"
@@ -163,7 +163,7 @@ exports[`should render correctly after inserting a tab with name 1`] = `
     >
       <div id="van-tabs-0"
            role="tab"
-           class="van-tab"
+           class="van-tab van-tab--line"
            tabindex="-1"
            aria-selected="false"
            aria-controls="van-tab"
@@ -174,7 +174,7 @@ exports[`should render correctly after inserting a tab with name 1`] = `
       </div>
       <div id="van-tabs-1"
            role="tab"
-           class="van-tab van-tab--active"
+           class="van-tab van-tab--line van-tab--active"
            tabindex="0"
            aria-selected="true"
            aria-controls="van-tab"

packages/vant/src/tabs/Tabs.tsx

@@ -65,6 +65,7 @@ const tabsProps = {
   color: String,
   border: Boolean,
   sticky: Boolean,
+  shrink: Boolean,
   active: makeNumericProp(0),
   duration: makeNumericProp(0.3),
   animated: Boolean,
@@ -368,6 +369,7 @@ export default defineComponent({
           color={props.color}
           style={item.titleStyle}
           class={item.titleClass}
+          shrink={props.shrink}
           isActive={index === state.currentIndex}
           controls={item.id}
           scrollable={scrollable.value}
@@ -403,7 +405,10 @@ export default defineComponent({
           <div
             ref={navRef}
             role="tablist"
-            class={bem('nav', [type, { complete: scrollable.value }])}
+            class={bem('nav', [
+              type,
+              { shrink: props.shrink, complete: scrollable.value },
+            ])}
             style={navStyle.value}
             aria-orientation="horizontal"
           >

packages/vant/src/tabs/TabsTitle.tsx

@@ -14,6 +14,7 @@ export default defineComponent({
     color: String,
     title: String,
     badge: numericProp,
+    shrink: Boolean,
     isActive: Boolean,
     disabled: Boolean,
     controls: String,
@@ -79,10 +80,14 @@ export default defineComponent({
         id={props.id}
         role="tab"
         class={[
-          bem({
+          bem([
-            active: props.isActive,
+            props.type,
-            disabled: props.disabled,
+            {
-          }),
+              shrink: props.shrink,
+              active: props.isActive,
+              disabled: props.disabled,
+            },
+          ]),
         ]}
         style={style.value}
         tabindex={props.disabled ? undefined : props.isActive ? 0 : -1}

packages/vant/src/tabs/index.less

@@ -38,6 +38,30 @@
     cursor: not-allowed;
   }
 
+  &--shrink {
+    flex: none;
+    padding: 0 var(--van-padding-xs);
+  }
+
+  &--card {
+    color: var(--van-tabs-default-color);
+    border-right: var(--van-border-width-base) solid
+      var(--van-tabs-default-color);
+
+    &:last-child {
+      border-right: none;
+    }
+
+    &.van-tab--active {
+      color: var(--van-white);
+      background-color: var(--van-tabs-default-color);
+    }
+
+    &--disabled {
+      color: var(--van-tab-disabled-text-color);
+    }
+  }
+
   &__text {
     &--ellipsis {
       display: -webkit-box;
@@ -93,6 +117,7 @@
       padding-bottom: 15px; /* 15px padding to hide scrollbar in mobile safari */
     }
 
+    &--line&--shrink,
     &--line&--complete {
       padding-right: var(--van-padding-xs);
       padding-left: var(--van-padding-xs);
@@ -104,25 +129,10 @@
       margin: 0 var(--van-padding-md);
       border: var(--van-border-width-base) solid var(--van-tabs-default-color);
       border-radius: var(--van-border-radius-sm);
+    }
 
-      .van-tab {
+    &--card&--shrink {
-        color: var(--van-tabs-default-color);
+      display: inline-flex;
-        border-right: var(--van-border-width-base) solid
-          var(--van-tabs-default-color);
-
-        &:last-child {
-          border-right: none;
-        }
-
-        &.van-tab--active {
-          color: var(--van-white);
-          background-color: var(--van-tabs-default-color);
-        }
-
-        &--disabled {
-          color: var(--van-tab-disabled-text-color);
-        }
-      }
     }
   }