github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

doc: update tabs demo

refactor-tabs
tangjinzhou 2021-10-06 22:15:14 +08:00
parent 28212b821e
commit 488437b819
2 changed files with 44 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/tabs/__tests__/__snapshots__/demo.test.js.snap
View File

@ -422,9 +422,8 @@ exports[`renders ./components/tabs/demo/icon.vue correctly 1`] = `
`; `;
exports[`renders ./components/tabs/demo/position.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-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 class="ant-tabs ant-tabs-top">
<div role="tablist" class="ant-tabs-nav"> <div role="tablist" class="ant-tabs-nav">
<!----> <!---->
<div class="ant-tabs-nav-wrap"> <div class="ant-tabs-nav-wrap">
@ -463,7 +462,6 @@ exports[`renders ./components/tabs/demo/position.vue correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
`; `;

6
components/tabs/demo/position.vue
View File

@ -8,16 +8,15 @@ title:
## zh-CN ## zh-CN
有四个位置，`tabPosition="left|right|top|bottom"`。 有四个位置，`tabPosition="left|right|top|bottom"`。在移动端下，`bottom|right` 会自动切换成 `top`。
## en-US ## 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> </docs>
<template> <template>
<div style="width: 500px">
<a-radio-group v-model:value="tabPosition" style="margin: 8px"> <a-radio-group v-model:value="tabPosition" style="margin: 8px">
<a-radio-button value="top">top</a-radio-button> <a-radio-button value="top">top</a-radio-button>
<a-radio-button value="bottom">bottom</a-radio-button> <a-radio-button value="bottom">bottom</a-radio-button>
@ -29,7 +28,6 @@ Tab's position: left, right, top or bottom.
<a-tab-pane key="2" tab="Tab 2">Content of Tab 2</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-tab-pane key="3" tab="Tab 3">Content of Tab 3</a-tab-pane>
</a-tabs> </a-tabs>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref } from 'vue'; import { defineComponent, ref } from 'vue';