From 488437b819a5782b5fb9dea952fe5db44948031e Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Wed, 6 Oct 2021 22:15:14 +0800
Subject: [PATCH] doc: update tabs demo

---
 .../__tests__/__snapshots__/demo.test.js.snap | 64 +++++++++----------
 components/tabs/demo/position.vue             | 28 ++++----
 2 files changed, 44 insertions(+), 48 deletions(-)

diff --git a/components/tabs/__tests__/__snapshots__/demo.test.js.snap b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
index 62a27cc78..afb9d8148 100644
--- a/components/tabs/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
@@ -422,45 +422,43 @@ exports[`renders ./components/tabs/demo/icon.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/tabs/demo/position.vue correctly 1`] = `
-<div style="width: 500px;">
-  <div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" style="margin: 8px;"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="top"><span class="ant-radio-button-inner"></span></span><span>top</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottom"><span class="ant-radio-button-inner"></span></span><span>bottom</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="left"><span class="ant-radio-button-inner"></span></span><span>left</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="right"><span class="ant-radio-button-inner"></span></span><span>right</span></label></div>
-  <div class="ant-tabs ant-tabs-top">
-    <div role="tablist" class="ant-tabs-nav">
-      <!---->
-      <div class="ant-tabs-nav-wrap">
-        <div class="ant-tabs-nav-list" style="transform: translate(0px, 0px);">
-          <div class="ant-tabs-tab ant-tabs-tab-active">
-            <div role="tab" aria-selected="true" class="ant-tabs-tab-btn" tabindex="0" id="rc-tabs-test-tab-1" aria-controls="rc-tabs-test-panel-1">Tab 1</div>
-            <!---->
-          </div>
-          <div class="ant-tabs-tab">
-            <div role="tab" aria-selected="false" class="ant-tabs-tab-btn" tabindex="0" id="rc-tabs-test-tab-2" aria-controls="rc-tabs-test-panel-2">Tab 2</div>
-            <!---->
-          </div>
-          <div class="ant-tabs-tab">
-            <div role="tab" aria-selected="false" class="ant-tabs-tab-btn" tabindex="0" id="rc-tabs-test-tab-3" aria-controls="rc-tabs-test-panel-3">Tab 3</div>
-            <!---->
-          </div>
+<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" style="margin: 8px;"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="top"><span class="ant-radio-button-inner"></span></span><span>top</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottom"><span class="ant-radio-button-inner"></span></span><span>bottom</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="left"><span class="ant-radio-button-inner"></span></span><span>left</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="right"><span class="ant-radio-button-inner"></span></span><span>right</span></label></div>
+<div class="ant-tabs ant-tabs-top">
+  <div role="tablist" class="ant-tabs-nav">
+    <!---->
+    <div class="ant-tabs-nav-wrap">
+      <div class="ant-tabs-nav-list" style="transform: translate(0px, 0px);">
+        <div class="ant-tabs-tab ant-tabs-tab-active">
+          <div role="tab" aria-selected="true" class="ant-tabs-tab-btn" tabindex="0" id="rc-tabs-test-tab-1" aria-controls="rc-tabs-test-panel-1">Tab 1</div>
+          <!---->
+        </div>
+        <div class="ant-tabs-tab">
+          <div role="tab" aria-selected="false" class="ant-tabs-tab-btn" tabindex="0" id="rc-tabs-test-tab-2" aria-controls="rc-tabs-test-panel-2">Tab 2</div>
+          <!---->
+        </div>
+        <div class="ant-tabs-tab">
+          <div role="tab" aria-selected="false" class="ant-tabs-tab-btn" tabindex="0" id="rc-tabs-test-tab-3" aria-controls="rc-tabs-test-panel-3">Tab 3</div>
           <!---->
-          <div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div>
         </div>
-      </div>
-      <div class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden">
-        <!----><button type="button" class="ant-tabs-nav-more" style="visibility: hidden; order: 1;" tabindex="-1" aria-hidden="true" aria-haspopup="listbox" aria-controls="rc-tabs-test-more-popup" id="rc-tabs-test-more" aria-expanded="false"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button>
         <!---->
+        <div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div>
       </div>
-      <!---->
+    </div>
+    <div class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden">
+      <!----><button type="button" class="ant-tabs-nav-more" style="visibility: hidden; order: 1;" tabindex="-1" aria-hidden="true" aria-haspopup="listbox" aria-controls="rc-tabs-test-more-popup" id="rc-tabs-test-more" aria-expanded="false"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button>
       <!---->
     </div>
-    <div class="ant-tabs-content-holder">
-      <div class="ant-tabs-content ant-tabs-content-top">
-        <div role="tabpanel" tabindex="0" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active" id="rc-tabs-test-panel-1" aria-labelledby="rc-tabs-test-tab-1">Content of Tab 1</div>
-        <div role="tabpanel" tabindex="-1" aria-hidden="true" style="display: none;" class="ant-tabs-tabpane" id="rc-tabs-test-panel-2" aria-labelledby="rc-tabs-test-tab-2">
-          <!---->
-        </div>
-        <div role="tabpanel" tabindex="-1" aria-hidden="true" style="display: none;" class="ant-tabs-tabpane" id="rc-tabs-test-panel-3" aria-labelledby="rc-tabs-test-tab-3">
-          <!---->
-        </div>
+    <!---->
+    <!---->
+  </div>
+  <div class="ant-tabs-content-holder">
+    <div class="ant-tabs-content ant-tabs-content-top">
+      <div role="tabpanel" tabindex="0" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active" id="rc-tabs-test-panel-1" aria-labelledby="rc-tabs-test-tab-1">Content of Tab 1</div>
+      <div role="tabpanel" tabindex="-1" aria-hidden="true" style="display: none;" class="ant-tabs-tabpane" id="rc-tabs-test-panel-2" aria-labelledby="rc-tabs-test-tab-2">
+        <!---->
+      </div>
+      <div role="tabpanel" tabindex="-1" aria-hidden="true" style="display: none;" class="ant-tabs-tabpane" id="rc-tabs-test-panel-3" aria-labelledby="rc-tabs-test-tab-3">
+        <!---->
       </div>
     </div>
   </div>
diff --git a/components/tabs/demo/position.vue b/components/tabs/demo/position.vue
index ac82e13c0..666762813 100644
--- a/components/tabs/demo/position.vue
+++ b/components/tabs/demo/position.vue
@@ -8,28 +8,26 @@ title:
 
 ## zh-CN
 
-有四个位置，`tabPosition="left|right|top|bottom"`。
+有四个位置，`tabPosition="left|right|top|bottom"`。在移动端下，`bottom|right` 会自动切换成 `top`。
 
 ## en-US
 
-Tab's position: left, right, top or bottom.
+Tab's position: left, right, top or bottom.  Will auto switch to `top` in mobile.
 
 </docs>
 
 <template>
-  <div style="width: 500px">
-    <a-radio-group v-model:value="tabPosition" style="margin: 8px">
-      <a-radio-button value="top">top</a-radio-button>
-      <a-radio-button value="bottom">bottom</a-radio-button>
-      <a-radio-button value="left">left</a-radio-button>
-      <a-radio-button value="right">right</a-radio-button>
-    </a-radio-group>
-    <a-tabs v-model:activeKey="activeKey" :tab-position="tabPosition">
-      <a-tab-pane key="1" tab="Tab 1">Content of Tab 1</a-tab-pane>
-      <a-tab-pane key="2" tab="Tab 2">Content of Tab 2</a-tab-pane>
-      <a-tab-pane key="3" tab="Tab 3">Content of Tab 3</a-tab-pane>
-    </a-tabs>
-  </div>
+  <a-radio-group v-model:value="tabPosition" style="margin: 8px">
+    <a-radio-button value="top">top</a-radio-button>
+    <a-radio-button value="bottom">bottom</a-radio-button>
+    <a-radio-button value="left">left</a-radio-button>
+    <a-radio-button value="right">right</a-radio-button>
+  </a-radio-group>
+  <a-tabs v-model:activeKey="activeKey" :tab-position="tabPosition">
+    <a-tab-pane key="1" tab="Tab 1">Content of Tab 1</a-tab-pane>
+    <a-tab-pane key="2" tab="Tab 2">Content of Tab 2</a-tab-pane>
+    <a-tab-pane key="3" tab="Tab 3">Content of Tab 3</a-tab-pane>
+  </a-tabs>
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';