doc: update tabs demo
tangjinzhou
parent
28212b821e
commit
488437b819
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Reference in New Issue