Skip to content

Commit e097546

Browse files
tangjinzhoutangjinzhou
committed
docs: update tabs
1 parent 1d5e5b1 commit e097546

File tree

12 files changed

+116
-56
lines changed

12 files changed

+116
-56
lines changed

‎build/config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module.exports = {
22
dev: {
3-
componentName: 'time-picker', // dev components
3+
componentName: 'tabs', // dev components
44
},
55
};

‎components/tabs/__tests__/__snapshots__/demo.test.js.snap‎

Lines changed: 52 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -497,29 +497,65 @@ exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
497497
<div class="ant-tabs-nav-scroll">
498498
<div class="ant-tabs-nav ant-tabs-nav-animated">
499499
<div>
500-
<div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab">Tab 1</div>
501-
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 2</div>
502-
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 3</div>
503-
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 4</div>
504-
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 5</div>
505-
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 6</div>
506-
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 7</div>
507-
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 8</div>
508-
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 9</div>
509-
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 10</div>
510-
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 11</div>
500+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-1</div>
501+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-2</div>
502+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-3</div>
503+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-4</div>
504+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-5</div>
505+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-6</div>
506+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-7</div>
507+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-8</div>
508+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-9</div>
509+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-10</div>
510+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-11</div>
511+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-12</div>
512+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-13</div>
513+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-14</div>
514+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-15</div>
515+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-16</div>
516+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-17</div>
517+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-18</div>
518+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-19</div>
519+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-20</div>
520+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-21</div>
521+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-22</div>
522+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-23</div>
523+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-24</div>
524+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-25</div>
525+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-26</div>
526+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-27</div>
527+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-28</div>
528+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-29</div>
529+
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab-30</div>
511530
</div>
512-
<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>
531+
<div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated" style="display: none;"></div>
513532
</div>
514533
</div>
515534
</div>
516535
</div>
517536
</div>
518537
<div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div>
519-
<div class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content" style="margin-left: 0%;">
520-
<div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">
521-
<div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div>Content of tab 1<div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div>
522-
</div>
538+
<div class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content" style="display: none;">
539+
<div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
540+
<div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
541+
<div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
542+
<div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
543+
<div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
544+
<div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
545+
<div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
546+
<div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
547+
<div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
548+
<div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
549+
<div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
550+
<div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
551+
<div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
552+
<div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
553+
<div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
554+
<div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
555+
<div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
556+
<div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
557+
<div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
558+
<div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
523559
<div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
524560
<div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
525561
<div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>

‎components/tabs/demo/index.vue‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -53,17 +53,19 @@ export default {
5353
return (
5454
<div>
5555
<md cn={md.cn} us={md.us} />
56-
<Basic />
57-
<Disabled />
58-
<Icon />
59-
<Slide />
60-
<Extra />
61-
<Size />
62-
<Position />
63-
<Card />
64-
<EditableCard />
65-
<CardTop />
66-
<CustomAddTrigger />
56+
<demo-sort>
57+
<Basic />
58+
<Disabled />
59+
<Icon />
60+
<Slide />
61+
<Extra />
62+
<Size />
63+
<Position />
64+
<Card />
65+
<EditableCard />
66+
<CardTop />
67+
<CustomAddTrigger />
68+
</demo-sort>
6769
<api>
6870
<template slot="cn">
6971
<CN />

‎components/tabs/demo/slide.md‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,7 @@ In order to fit in more tabs, they can slide left and right (or up and down).
2222
@prevClick="callback"
2323
@nextClick="callback"
2424
>
25-
<a-tab-pane tab="Tab 1" key="1">Content of tab 1</a-tab-pane>
26-
<a-tab-pane tab="Tab 2" key="2">Content of tab 2</a-tab-pane>
27-
<a-tab-pane tab="Tab 3" key="3">Content of tab 3</a-tab-pane>
28-
<a-tab-pane tab="Tab 4" key="4">Content of tab 4</a-tab-pane>
29-
<a-tab-pane tab="Tab 5" key="5">Content of tab 5</a-tab-pane>
30-
<a-tab-pane tab="Tab 6" key="6">Content of tab 6</a-tab-pane>
31-
<a-tab-pane tab="Tab 7" key="7">Content of tab 7</a-tab-pane>
32-
<a-tab-pane tab="Tab 8" key="8">Content of tab 8</a-tab-pane>
33-
<a-tab-pane tab="Tab 9" key="9">Content of tab 9</a-tab-pane>
34-
<a-tab-pane tab="Tab 10" key="10">Content of tab 10</a-tab-pane>
35-
<a-tab-pane tab="Tab 11" key="11">Content of tab 11</a-tab-pane>
25+
<a-tab-pane v-for="i in 30" :tab="`Tab-${i}`" :key="i">Content of tab {{i}}</a-tab-pane>
3626
</a-tabs>
3727
</div>
3828
</template>

‎components/timeline/Timeline.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const TimelineProps = {
1919
pending: PropTypes.any,
2020
pendingDot: PropTypes.string,
2121
reverse: PropTypes.bool,
22-
mode: PropTypes.oneOf(['left', 'alternate', 'right']),
22+
mode: PropTypes.oneOf(['left', 'alternate', 'right', '']),
2323
};
2424

2525
export default {

‎components/vc-tabs/src/InkTabBarNode.jsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
import PropTypes from '../../_util/vue-types';
2-
import { setTransform, isTransformSupported, getLeft, getTop, getActiveIndex } from './utils';
2+
import {
3+
setTransform,
4+
isTransform3dSupported,
5+
getLeft,
6+
getStyle,
7+
getTop,
8+
getActiveIndex,
9+
} from './utils';
310
import BaseMixin from '../../_util/BaseMixin';
411

512
function componentDidUpdate(component, init) {
6-
const { styles = {}, panels, activeKey } = component.$props;
13+
const { styles = {}, panels, activeKey, direction } = component.$props;
714
const rootNode = component.getRef('root');
815
const wrapNode = component.getRef('nav') || rootNode;
916
const inkBarNode = component.getRef('inkBar');
@@ -17,7 +24,7 @@ function componentDidUpdate(component, init) {
1724
}
1825
if (activeTab) {
1926
const tabNode = activeTab;
20-
const transformSupported = isTransformSupported(inkBarNodeStyle);
27+
const transformSupported = isTransform3dSupported(inkBarNodeStyle);
2128

2229
// Reset current style
2330
setTransform(inkBarNodeStyle, '');
@@ -42,6 +49,9 @@ function componentDidUpdate(component, init) {
4249
left += (tabNode.offsetWidth - width) / 2;
4350
}
4451
}
52+
if (direction === 'rtl') {
53+
left = getStyle(tabNode, 'margin-left') - left;
54+
}
4555
// use 3d gpu to optimize render
4656
if (transformSupported) {
4757
setTransform(inkBarNodeStyle, `translate3d(${left}px,0,0)`);
@@ -78,6 +88,7 @@ export default {
7888
type: Boolean,
7989
default: true,
8090
},
91+
direction: PropTypes.string,
8192
prefixCls: String,
8293
styles: Object,
8394
tabBarPosition: String,

‎components/vc-tabs/src/ScrollableTabBarNode.jsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import addDOMEventListener from 'add-dom-event-listener';
21
import debounce from 'lodash/debounce';
2+
import ResizeObserver from 'resize-observer-polyfill';
33
import PropTypes from '../../_util/vue-types';
44
import BaseMixin from '../../_util/BaseMixin';
55
import { getComponentFromProp } from '../../_util/props-util';
6-
import { setTransform, isTransformSupported } from './utils';
6+
import { setTransform, isTransform3dSupported } from './utils';
77

88
function noop() {}
99
export default {
@@ -19,6 +19,7 @@ export default {
1919
navWrapper: PropTypes.func.def(arg => arg),
2020
prevIcon: PropTypes.any,
2121
nextIcon: PropTypes.any,
22+
direction: PropTypes.string,
2223
},
2324

2425
data() {
@@ -45,7 +46,8 @@ export default {
4546
this.setNextPrev();
4647
this.scrollToActiveTab();
4748
}, 200);
48-
this.resizeEvent = addDOMEventListener(window, 'resize', this.debouncedResize);
49+
this.resizeObserver = new ResizeObserver(this.debouncedResize);
50+
this.resizeObserver.observe(this.$props.getRef('container'));
4951
});
5052
},
5153

@@ -57,8 +59,8 @@ export default {
5759
},
5860

5961
beforeDestroy() {
60-
if (this.resizeEvent) {
61-
this.resizeEvent.remove();
62+
if (this.resizeObserver) {
63+
this.resizeObserver.remove();
6264
}
6365
if (this.debouncedResize && this.debouncedResize.cancel) {
6466
this.debouncedResize.cancel();
@@ -151,13 +153,13 @@ export default {
151153
},
152154

153155
setOffset(offset, checkNextPrev = true) {
154-
const target = Math.min(0, offset);
156+
let target = Math.min(0, offset);
155157
if (this.offset !== target) {
156158
this.offset = target;
157159
let navOffset = {};
158160
const tabBarPosition = this.$props.tabBarPosition;
159161
const navStyle = this.$props.getRef('nav').style;
160-
const transformSupported = isTransformSupported(navStyle);
162+
const transformSupported = isTransform3dSupported(navStyle);
161163
if (tabBarPosition === 'left' || tabBarPosition === 'right') {
162164
if (transformSupported) {
163165
navOffset = {
@@ -170,6 +172,9 @@ export default {
170172
};
171173
}
172174
} else if (transformSupported) {
175+
if (this.$props.direction === 'rtl') {
176+
target = -target;
177+
}
173178
navOffset = {
174179
value: `translate3d(${target}px,0,0)`,
175180
};

‎components/vc-tabs/src/TabBarTabsNode.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export default {
1717
getRef: PropTypes.func.def(noop),
1818
renderTabBarNode: PropTypes.func,
1919
tabBarPosition: PropTypes.string,
20+
direction: PropTypes.string,
2021
},
2122
render() {
2223
const {
@@ -26,6 +27,7 @@ export default {
2627
tabBarGutter,
2728
saveRef,
2829
tabBarPosition,
30+
direction,
2931
} = this.$props;
3032
const rst = [];
3133
const renderTabBarNode = this.renderTabBarNode || this.$scopedSlots.renderTabBarNode;
@@ -56,8 +58,9 @@ export default {
5658
const tab = getComponentFromProp(child, 'tab');
5759
let gutter = tabBarGutter && index === children.length - 1 ? 0 : tabBarGutter;
5860
gutter = typeof gutter === 'number' ? `${gutter}px` : gutter;
61+
const marginProperty = direction === 'rtl' ? 'marginLeft' : 'marginRight';
5962
const style = {
60-
[isVertical(tabBarPosition) ? 'marginBottom' : 'marginRight']: gutter,
63+
[isVertical(tabBarPosition) ? 'marginBottom' : marginProperty]: gutter,
6164
};
6265
warning(tab !== undefined, 'There must be `tab` property or slot on children of Tabs.');
6366
let node = (

‎components/vc-tabs/src/TabContent.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ export default {
1717
},
1818
activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
1919
tabBarPosition: String,
20+
direction: PropTypes.string,
21+
destroyInactiveTabPane: PropTypes.bool,
2022
},
2123
computed: {
2224
classes() {
@@ -62,7 +64,7 @@ export default {
6264
if (activeIndex !== -1) {
6365
const animatedStyle = animatedWithMargin
6466
? getMarginStyle(activeIndex, tabBarPosition)
65-
: getTransformPropValue(getTransformByIndex(activeIndex, tabBarPosition));
67+
: getTransformPropValue(getTransformByIndex(activeIndex, tabBarPosition, direction));
6668
style = animatedStyle;
6769
} else {
6870
style = {

‎components/vc-tabs/src/Tabs.jsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ export default {
4242
activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
4343
defaultActiveKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
4444
__propsSymbol__: PropTypes.any,
45+
direction: PropTypes.string.def('ltr'),
4546
},
4647
data() {
4748
const props = getOptionProps(this);
@@ -177,6 +178,7 @@ export default {
177178

178179
raf.cancel(this.sentinelId);
179180
this.sentinelId = raf(() => {
181+
if (this.destroy) return;
180182
this.$forceUpdate();
181183
});
182184
},
@@ -190,10 +192,12 @@ export default {
190192
renderTabContent,
191193
renderTabBar,
192194
destroyInactiveTabPane,
195+
direction,
193196
} = props;
194197
const cls = {
195198
[prefixCls]: 1,
196199
[`${prefixCls}-${tabBarPosition}`]: 1,
200+
[`${prefixCls}-rtl`]: direction === 'rtl',
197201
};
198202

199203
this.tabBar = renderTabBar();
@@ -204,6 +208,7 @@ export default {
204208
tabBarPosition,
205209
panels: props.children,
206210
activeKey: this.$data._activeKey,
211+
direction,
207212
},
208213
on: {
209214
keydown: this.onNavKeyDown,
@@ -217,6 +222,7 @@ export default {
217222
tabBarPosition,
218223
activeKey: this.$data._activeKey,
219224
destroyInactiveTabPane,
225+
direction,
220226
},
221227
on: {
222228
change: this.setActiveKey,

0 commit comments

Comments
 (0)