test: update tabs test
tangjinzhou
parent
603c91a81a
commit
fd27c65507
|
|
@ -7,6 +7,7 @@ import Col from '../col';
|
|||
import PropTypes from '../_util/vue-types';
|
||||
import { getComponent, getSlot, isEmptyElement } from '../_util/props-util';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import type { SizeType } from '../config-provider';
|
||||
import { defaultConfigProvider } from '../config-provider';
|
||||
import isPlainObject from 'lodash-es/isPlainObject';
|
||||
|
||||
|
|
@ -21,7 +22,7 @@ export type CardType = 'inner';
|
|||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
const cardProps = {
|
||||
const cardProps = () => ({
|
||||
prefixCls: PropTypes.string,
|
||||
title: PropTypes.VNodeChild,
|
||||
extra: PropTypes.VNodeChild,
|
||||
|
|
@ -43,14 +44,14 @@ const cardProps = {
|
|||
onTabChange: {
|
||||
type: Function as PropType<(key: string) => void>,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
export type CardProps = Partial<ExtractPropTypes<typeof cardProps>>;
|
||||
export type CardProps = Partial<ExtractPropTypes<ReturnType<typeof cardProps>>>;
|
||||
|
||||
const Card = defineComponent({
|
||||
name: 'ACard',
|
||||
mixins: [BaseMixin],
|
||||
props: cardProps,
|
||||
props: cardProps(),
|
||||
setup() {
|
||||
return {
|
||||
configProvider: inject('configProvider', defaultConfigProvider),
|
||||
|
|
@ -166,7 +167,7 @@ const Card = defineComponent({
|
|||
|
||||
const hasActiveTabKey = activeTabKey !== undefined;
|
||||
const tabsProps = {
|
||||
size: 'large',
|
||||
size: 'large' as SizeType,
|
||||
[hasActiveTabKey ? 'activeKey' : 'defaultActiveKey']: hasActiveTabKey
|
||||
? activeTabKey
|
||||
: defaultActiveTabKey,
|
||||
|
|
|
|||
|
|
@ -294,35 +294,40 @@ exports[`renders ./components/card/demo/tabs.vue correctly 1`] = `
|
|||
<div class="ant-card-head-title">Card title</div>
|
||||
<div class="ant-card-extra"><a href="#">More</a></div>
|
||||
</div>
|
||||
<div class="ant-card-head-tabs ant-tabs-large ant-tabs-line ant-tabs ant-tabs-top">
|
||||
<div role="tablist" class="ant-tabs-bar ant-tabs-top-bar ant-tabs-large-bar" tabindex="0">
|
||||
<div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"><span role="img" aria-label="left" class="anticon anticon-left ant-tabs-tab-prev-icon-target"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-tabs-tab-next-icon-target"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span></span>
|
||||
<div class="ant-tabs-nav-wrap">
|
||||
<div class="ant-tabs-nav-scroll">
|
||||
<div class="ant-tabs-nav ant-tabs-nav-animated">
|
||||
<div>
|
||||
<div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab"><span><span role="img" aria-label="home" class="anticon anticon-home"><svg focusable="false" class="" data-icon="home" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 00-44.4 0L77.5 505a63.9 63.9 0 00-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0018.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"></path></svg></span> tab1</span></div>
|
||||
<div role="tab" aria-disabled="false" aria-selected="false" class="ant-tabs-tab">tab2</div>
|
||||
</div>
|
||||
<div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated" style="display: block; transform: translate3d(0px,0,0); webkit-transform: translate3d(0px,0,0); width: 0px;"></div>
|
||||
</div>
|
||||
<div class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs">
|
||||
<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-tab1" aria-controls="rc-tabs-test-panel-tab1"><span><span role="img" aria-label="home" class="anticon anticon-home"><svg focusable="false" class="" data-icon="home" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 00-44.4 0L77.5 505a63.9 63.9 0 00-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0018.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"></path></svg></span> tab1</span></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-tab2" aria-controls="rc-tabs-test-panel-tab2">tab2</div>
|
||||
<!---->
|
||||
</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>
|
||||
<!---->
|
||||
<!---->
|
||||
</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-tab1" aria-labelledby="rc-tabs-test-tab-tab1">
|
||||
<!---->
|
||||
</div>
|
||||
<div role="tabpanel" tabindex="-1" aria-hidden="true" style="display: none;" class="ant-tabs-tabpane" id="rc-tabs-test-panel-tab2" aria-labelledby="rc-tabs-test-tab-tab2">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; position: absolute;" role="presentation"></div>
|
||||
<div class="ant-tabs-top-content ant-tabs-content ant-tabs-content-animated" style="margin-left: 0%;">
|
||||
<div class="ant-tabs-tabpane ant-tabs-tabpane-active" role="tabpanel" aria-hidden="false">
|
||||
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; position: absolute;" role="presentation"></div>
|
||||
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; position: absolute;" role="presentation"></div>
|
||||
</div>
|
||||
<div class="ant-tabs-tabpane ant-tabs-tabpane-inactive" role="tabpanel" aria-hidden="true">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; position: absolute;" role="presentation"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
|
|
@ -335,42 +340,47 @@ exports[`renders ./components/card/demo/tabs.vue correctly 1`] = `
|
|||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="ant-card-head-tabs ant-tabs-large ant-tabs-line ant-tabs ant-tabs-top">
|
||||
<div role="tablist" class="ant-tabs-bar ant-tabs-top-bar ant-tabs-large-bar" tabindex="0">
|
||||
<div class="ant-tabs-extra-content" style="float: right;"><a href="#">More</a></div>
|
||||
<div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"><span role="img" aria-label="left" class="anticon anticon-left ant-tabs-tab-prev-icon-target"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-tabs-tab-next-icon-target"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span></span>
|
||||
<div class="ant-tabs-nav-wrap">
|
||||
<div class="ant-tabs-nav-scroll">
|
||||
<div class="ant-tabs-nav ant-tabs-nav-animated">
|
||||
<div>
|
||||
<div role="tab" aria-disabled="false" aria-selected="false" class="ant-tabs-tab">article</div>
|
||||
<div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab">app</div>
|
||||
<div role="tab" aria-disabled="false" aria-selected="false" class="ant-tabs-tab">project</div>
|
||||
</div>
|
||||
<div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated" style="display: block; transform: translate3d(0px,0,0); webkit-transform: translate3d(0px,0,0); width: 0px;"></div>
|
||||
</div>
|
||||
<div class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs">
|
||||
<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">
|
||||
<div role="tab" aria-selected="false" class="ant-tabs-tab-btn" tabindex="0" id="rc-tabs-test-tab-article" aria-controls="rc-tabs-test-panel-article">article</div>
|
||||
<!---->
|
||||
</div>
|
||||
<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-app" aria-controls="rc-tabs-test-panel-app">app</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-project" aria-controls="rc-tabs-test-panel-project">project</div>
|
||||
<!---->
|
||||
</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>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="ant-tabs-content-holder">
|
||||
<div class="ant-tabs-content ant-tabs-content-top">
|
||||
<div role="tabpanel" tabindex="-1" aria-hidden="true" style="display: none;" class="ant-tabs-tabpane" id="rc-tabs-test-panel-article" aria-labelledby="rc-tabs-test-tab-article">
|
||||
<!---->
|
||||
</div>
|
||||
<div role="tabpanel" tabindex="0" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active" id="rc-tabs-test-panel-app" aria-labelledby="rc-tabs-test-tab-app">
|
||||
<!---->
|
||||
</div>
|
||||
<div role="tabpanel" tabindex="-1" aria-hidden="true" style="display: none;" class="ant-tabs-tabpane" id="rc-tabs-test-panel-project" aria-labelledby="rc-tabs-test-tab-project">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; position: absolute;" role="presentation"></div>
|
||||
<div class="ant-tabs-top-content ant-tabs-content ant-tabs-content-animated" style="margin-left: -100%;">
|
||||
<div class="ant-tabs-tabpane ant-tabs-tabpane-inactive" role="tabpanel" aria-hidden="true">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="ant-tabs-tabpane ant-tabs-tabpane-active" role="tabpanel" aria-hidden="false">
|
||||
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; position: absolute;" role="presentation"></div>
|
||||
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; position: absolute;" role="presentation"></div>
|
||||
</div>
|
||||
<div class="ant-tabs-tabpane ant-tabs-tabpane-inactive" role="tabpanel" aria-hidden="true">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; position: absolute;" role="presentation"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ exports[`renders ./components/menu/demo/horizontal.vue correctly 1`] = `
|
|||
`;
|
||||
|
||||
exports[`renders ./components/menu/demo/inline.vue correctly 1`] = `
|
||||
<ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-light" style="width: 256px;" role="menu" data-menu-list="true" id="dddddd">
|
||||
<ul id="dddddd" class="ant-menu ant-menu-root ant-menu-inline ant-menu-light" style="width: 256px;" role="menu" data-menu-list="true">
|
||||
<li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected" role="none" data-submenu-id="sub1">
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
|
|
|
|||
|
|
@ -1135,10 +1135,10 @@ exports[`renders ./components/page-header/demo/ghost.vue correctly 1`] = `
|
|||
exports[`renders ./components/page-header/demo/responsive.vue correctly 1`] = `
|
||||
<div
|
||||
class="components-page-header-demo-responsive"
|
||||
style="border: 1px solid rgb(235, 237, 240);"
|
||||
>
|
||||
<div
|
||||
class="ant-page-header has-footer ant-page-header-ghost"
|
||||
style="border: 1px solid rgb(235, 237, 240);"
|
||||
>
|
||||
<!---->
|
||||
<div
|
||||
|
|
@ -1464,174 +1464,132 @@ exports[`renders ./components/page-header/demo/responsive.vue correctly 1`] = `
|
|||
>
|
||||
|
||||
<div
|
||||
class="ant-tabs-line ant-tabs ant-tabs-top"
|
||||
class="ant-tabs ant-tabs-top"
|
||||
>
|
||||
|
||||
<div
|
||||
class="ant-tabs-bar ant-tabs-top-bar"
|
||||
class="ant-tabs-nav"
|
||||
role="tablist"
|
||||
tabindex="0"
|
||||
>
|
||||
|
||||
<!---->
|
||||
<div
|
||||
class="ant-tabs-nav-container"
|
||||
class="ant-tabs-nav-wrap"
|
||||
>
|
||||
<span
|
||||
class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<span
|
||||
class="ant-tabs-tab-prev-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="left"
|
||||
class="anticon anticon-left ant-tabs-tab-prev-icon-target"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="left"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<span
|
||||
class="ant-tabs-tab-next-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right ant-tabs-tab-next-icon-target"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-tabs-nav-wrap"
|
||||
class="ant-tabs-nav-list"
|
||||
style="transform: translate(0px, 0px);"
|
||||
>
|
||||
|
||||
<div
|
||||
class="ant-tabs-nav-scroll"
|
||||
class="ant-tabs-tab ant-tabs-tab-active"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-nav ant-tabs-nav-animated"
|
||||
aria-controls="rc-tabs-test-panel-1"
|
||||
aria-selected="true"
|
||||
class="ant-tabs-tab-btn"
|
||||
id="rc-tabs-test-tab-1"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
|
||||
<div>
|
||||
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-selected="true"
|
||||
class="ant-tabs-tab-active ant-tabs-tab"
|
||||
role="tab"
|
||||
>
|
||||
Details
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-selected="false"
|
||||
class="ant-tabs-tab"
|
||||
role="tab"
|
||||
>
|
||||
Rule
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
style="display: block; transform: translate3d(0px,0,0); webkit-transform: translate3d(0px,0,0); width: 0px;"
|
||||
/>
|
||||
|
||||
Details
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-tab"
|
||||
>
|
||||
<div
|
||||
aria-controls="rc-tabs-test-panel-2"
|
||||
aria-selected="false"
|
||||
class="ant-tabs-tab-btn"
|
||||
id="rc-tabs-test-tab-2"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
Rule
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div
|
||||
role="presentation"
|
||||
style="width: 0px; height: 0px; overflow: hidden; position: absolute;"
|
||||
tabindex="0"
|
||||
>
|
||||
|
||||
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-top-content ant-tabs-content ant-tabs-content-animated"
|
||||
style="margin-left: 0%;"
|
||||
>
|
||||
|
||||
<div
|
||||
aria-hidden="false"
|
||||
class="ant-tabs-tabpane ant-tabs-tabpane-active"
|
||||
role="tabpanel"
|
||||
>
|
||||
<div
|
||||
role="presentation"
|
||||
style="width: 0px; height: 0px; overflow: hidden; position: absolute;"
|
||||
tabindex="0"
|
||||
>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
role="presentation"
|
||||
style="width: 0px; height: 0px; overflow: hidden; position: absolute;"
|
||||
tabindex="0"
|
||||
>
|
||||
|
||||
|
||||
<!---->
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
|
||||
role="tabpanel"
|
||||
class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
|
||||
>
|
||||
|
||||
<!---->
|
||||
<!---->
|
||||
<button
|
||||
aria-controls="rc-tabs-test-more-popup"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-hidden="true"
|
||||
class="ant-tabs-nav-more"
|
||||
id="rc-tabs-test-more"
|
||||
style="visibility: hidden; order: 1;"
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="ellipsis"
|
||||
class="anticon anticon-ellipsis"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="ellipsis"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<!---->
|
||||
</div>
|
||||
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div
|
||||
role="presentation"
|
||||
style="width: 0px; height: 0px; overflow: hidden; position: absolute;"
|
||||
tabindex="0"
|
||||
class="ant-tabs-content-holder"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
class="ant-tabs-content ant-tabs-content-top"
|
||||
>
|
||||
|
||||
<div
|
||||
aria-hidden="false"
|
||||
aria-labelledby="rc-tabs-test-tab-1"
|
||||
class="ant-tabs-tabpane ant-tabs-tabpane-active"
|
||||
id="rc-tabs-test-panel-1"
|
||||
role="tabpanel"
|
||||
tabindex="0"
|
||||
>
|
||||
<!---->
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
aria-labelledby="rc-tabs-test-tab-2"
|
||||
class="ant-tabs-tabpane"
|
||||
id="rc-tabs-test-panel-2"
|
||||
role="tabpanel"
|
||||
style="display: none;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<!---->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,20 +18,15 @@ Under different screen sizes, there should be different performance
|
|||
</docs>
|
||||
|
||||
<template>
|
||||
<div class="components-page-header-demo-responsive">
|
||||
<a-page-header
|
||||
style="border: 1px solid rgb(235, 237, 240)"
|
||||
title="Title"
|
||||
sub-title="This is a subtitle"
|
||||
@back="() => $router.go(-1)"
|
||||
>
|
||||
<div class="components-page-header-demo-responsive" style="border: 1px solid rgb(235, 237, 240)">
|
||||
<a-page-header title="Title" sub-title="This is a subtitle" @back="() => $router.go(-1)">
|
||||
<template #extra>
|
||||
<a-button key="3">Operation</a-button>
|
||||
<a-button key="2">Operation</a-button>
|
||||
<a-button key="1" type="primary">Primary</a-button>
|
||||
</template>
|
||||
<template #footer>
|
||||
<a-tabs default-active-key="1">
|
||||
<a-tabs>
|
||||
<a-tab-pane key="1" tab="Details" />
|
||||
<a-tab-pane key="2" tab="Rule" />
|
||||
</a-tabs>
|
||||
|
|
@ -73,6 +68,9 @@ Under different screen sizes, there should be different performance
|
|||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.components-page-header-demo-responsive {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.components-page-header-demo-responsive tr:last-child td {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,28 +1,30 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Tabs tabPosition remove card 1`] = `
|
||||
<div class="ant-tabs-vertical ant-tabs-line ant-tabs ant-tabs-left">
|
||||
<div role="tablist" class="ant-tabs-bar ant-tabs-left-bar" tabindex="0">
|
||||
<div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"><span role="img" aria-label="up" class="anticon anticon-up ant-tabs-tab-prev-icon-target"><svg focusable="false" class="" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"><span role="img" aria-label="down" class="anticon anticon-down ant-tabs-tab-next-icon-target"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></span>
|
||||
<div class="ant-tabs-nav-wrap">
|
||||
<div class="ant-tabs-nav-scroll">
|
||||
<div class="ant-tabs-nav ant-tabs-nav-animated">
|
||||
<div>
|
||||
<div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab">foo</div>
|
||||
</div>
|
||||
<div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div>
|
||||
</div>
|
||||
<div class="ant-tabs ant-tabs-left">
|
||||
<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">foo</div>
|
||||
<!---->
|
||||
</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="null-more-popup" id="null-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-extra-content">xxx</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; position: absolute;" role="presentation"></div>
|
||||
<div class="ant-tabs-left-content ant-tabs-content ant-tabs-content-animated" style="margin-top: 0%;">
|
||||
<div class="ant-tabs-tabpane ant-tabs-tabpane-active" role="tabpanel" aria-hidden="false">
|
||||
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; position: absolute;" role="presentation"></div>foo<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; position: absolute;" role="presentation"></div>
|
||||
<div class="ant-tabs-content-holder">
|
||||
<div class="ant-tabs-content ant-tabs-content-left">
|
||||
<div role="tabpanel" tabindex="0" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">foo</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; position: absolute;" role="presentation"></div>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ describe('Tabs', () => {
|
|||
});
|
||||
|
||||
it('add card', () => {
|
||||
wrapper.find('.ant-tabs-new-tab').trigger('click');
|
||||
wrapper.find('.ant-tabs-nav-add').trigger('click');
|
||||
expect(handleEdit.mock.calls[0][1]).toBe('add');
|
||||
});
|
||||
|
||||
|
|
@ -37,7 +37,7 @@ describe('Tabs', () => {
|
|||
const wrapper = mount({
|
||||
render() {
|
||||
return (
|
||||
<Tabs tabPosition="left" tabBarExtraContent="xxx">
|
||||
<Tabs tabPosition="left" v-slots={{ rightExtra: () => 'xxx' }}>
|
||||
<TabPane tab="foo" key="1">
|
||||
foo
|
||||
</TabPane>
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ import type { SizeType } from '../../config-provider';
|
|||
import { useProvideTabs } from './TabContext';
|
||||
import type { Key } from '../../_util/type';
|
||||
import pick from 'lodash-es/pick';
|
||||
import PropTypes from '../../_util/vue-types';
|
||||
|
||||
export type TabsType = 'line' | 'card' | 'editable-card';
|
||||
export type TabsPosition = 'top' | 'right' | 'bottom' | 'left';
|
||||
|
|
@ -36,7 +37,7 @@ export const tabsProps = () => {
|
|||
prefixCls: { type: String },
|
||||
id: { type: String },
|
||||
|
||||
activeKey: { type: [String, Number], required: true },
|
||||
activeKey: { type: [String, Number] },
|
||||
defaultActiveKey: { type: [String, Number] },
|
||||
direction: { type: String as PropType<'ltr' | 'rtl'> },
|
||||
animated: { type: [Boolean, Object] as PropType<boolean | AnimatedConfig> },
|
||||
|
|
@ -65,6 +66,7 @@ export const tabsProps = () => {
|
|||
locale: { type: Object as PropType<TabsLocale>, default: undefined as TabsLocale },
|
||||
onPrevClick: Function,
|
||||
onNextClick: Function,
|
||||
tabBarExtraContent: PropTypes.any,
|
||||
};
|
||||
};
|
||||
|
||||
|
|
@ -138,10 +140,15 @@ const InternalTabs = defineComponent({
|
|||
'Tabs',
|
||||
'`onPrevClick / @prevClick` and `onNextClick / @nextClick` has been removed. Please use `onTabScroll / @tabScroll` instead.',
|
||||
);
|
||||
devWarning(
|
||||
!(props.tabBarExtraContent !== undefined),
|
||||
'Tabs',
|
||||
'`tabBarExtraContent` prop has been removed. Please use `rightExtra` slot instead.',
|
||||
);
|
||||
devWarning(
|
||||
!(slots.tabBarExtraContent !== undefined),
|
||||
'Tabs',
|
||||
'`tabBarExtraContent` slot is deprecated. Please use `rightExtra` instead.',
|
||||
'`tabBarExtraContent` slot is deprecated. Please use `rightExtra` slot instead.',
|
||||
);
|
||||
const { prefixCls, direction, size, rootPrefixCls } = useConfigInject('tabs', props);
|
||||
const rtl = computed(() => direction.value === 'rtl');
|
||||
|
|
|
|||
|
|
@ -118,7 +118,6 @@ Array [
|
|||
"TreeSelectNode",
|
||||
"Tabs",
|
||||
"TabPane",
|
||||
"TabContent",
|
||||
"Tag",
|
||||
"CheckableTag",
|
||||
"TimePicker",
|
||||
|
|
|
|||
Loading…
Reference in New Issue