@arco-design/mobile-react 2.27.2 → 2.27.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -0
- package/README.en-US.md +2 -2
- package/README.md +2 -2
- package/cjs/form/type.js +2 -0
- package/cjs/index-bar/utils.js +1 -3
- package/cjs/show-monitor/index.js +4 -3
- package/cjs/tabs/index.js +5 -2
- package/cjs/tabs/style/css/index.css +4 -0
- package/cjs/tabs/style/index.less +5 -0
- package/cjs/tabs/tab-pane.js +49 -12
- package/cjs/tabs/type.d.ts +7 -1
- package/dist/index.js +86 -42
- package/dist/index.min.js +3 -3
- package/dist/style.css +4 -0
- package/dist/style.min.css +1 -1
- package/esm/form/type.js +2 -0
- package/esm/index-bar/utils.js +1 -2
- package/esm/show-monitor/index.js +4 -3
- package/esm/tabs/index.js +5 -2
- package/esm/tabs/style/css/index.css +4 -0
- package/esm/tabs/style/index.less +5 -0
- package/esm/tabs/tab-pane.js +49 -11
- package/esm/tabs/type.d.ts +7 -1
- package/package.json +3 -3
- package/umd/form/type.js +2 -0
- package/umd/index-bar/utils.js +5 -5
- package/umd/show-monitor/index.js +4 -3
- package/umd/tabs/index.js +5 -2
- package/umd/tabs/style/css/index.css +4 -0
- package/umd/tabs/style/index.less +5 -0
- package/umd/tabs/tab-pane.js +49 -12
- package/umd/tabs/type.d.ts +7 -1
package/esm/tabs/tab-pane.js
CHANGED
@@ -34,6 +34,7 @@ var TabPane = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
34
34
|
translateZ = props.translateZ,
|
35
35
|
fullScreen = props.fullScreen,
|
36
36
|
autoHeight = props.autoHeight,
|
37
|
+
swipeEnergySaving = props.swipeEnergySaving,
|
37
38
|
changeIndex = props.changeIndex,
|
38
39
|
onScroll = props.onScroll;
|
39
40
|
var domRef = useRef(null);
|
@@ -45,12 +46,16 @@ var TabPane = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
45
46
|
shownIndexes = _useState[0],
|
46
47
|
setShownIndexes = _useState[1];
|
47
48
|
|
49
|
+
var _useState2 = useState(activeIndex),
|
50
|
+
shownActiveIndex = _useState2[0],
|
51
|
+
setShownActiveIndex = _useState2[1];
|
52
|
+
|
48
53
|
var prefix = prefixCls + "-tab-pane";
|
49
54
|
var handleTouchEnd = swipeable ? handlePaneTouchEnd : void 0;
|
50
55
|
|
51
|
-
var
|
52
|
-
currentPaneHeight =
|
53
|
-
setCurrentPaneHeight =
|
56
|
+
var _useState3 = useState('auto'),
|
57
|
+
currentPaneHeight = _useState3[0],
|
58
|
+
setCurrentPaneHeight = _useState3[1];
|
54
59
|
|
55
60
|
useImperativeHandle(ref, function () {
|
56
61
|
return {
|
@@ -136,6 +141,8 @@ var TabPane = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
136
141
|
}
|
137
142
|
|
138
143
|
function calcShownIndexes() {
|
144
|
+
setShownActiveIndex(activeIndex);
|
145
|
+
|
139
146
|
if (typeof lazyloadCount === 'number') {
|
140
147
|
setShownIndexes([activeIndex - lazyloadCount, activeIndex + lazyloadCount]);
|
141
148
|
return;
|
@@ -236,11 +243,35 @@ var TabPane = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
236
243
|
var heightStyle = currentPaneHeight && currentPaneHeight !== 'auto' ? {
|
237
244
|
height: currentPaneHeight
|
238
245
|
} : {};
|
239
|
-
return getStyleWithVendor(_extends({}, sizeStyle, {
|
246
|
+
return getStyleWithVendor(_extends({}, swipeEnergySaving ? {} : sizeStyle, {
|
240
247
|
transitionDuration: getTransition() + "ms"
|
241
248
|
}, heightStyle, commonStyle));
|
242
249
|
}
|
243
250
|
|
251
|
+
function getEnergySavingPaneStyle(index) {
|
252
|
+
if (mode === 'scroll' || !swipeEnergySaving) {
|
253
|
+
return undefined;
|
254
|
+
}
|
255
|
+
|
256
|
+
if (index !== shownActiveIndex) {
|
257
|
+
return {
|
258
|
+
position: 'absolute',
|
259
|
+
left: '-100%',
|
260
|
+
top: '-100%'
|
261
|
+
};
|
262
|
+
}
|
263
|
+
|
264
|
+
var translateStr = translateZ ? ' translateZ(0)' : '';
|
265
|
+
var sizeStyle = tabDirection === 'vertical' ? {
|
266
|
+
transform: "translateX(" + (distance - wrapWidth * (activeIndex - index)) + "px)" + translateStr
|
267
|
+
} : {
|
268
|
+
transform: "translateY(" + (distance - wrapHeight * (activeIndex - index)) + "px)" + translateStr
|
269
|
+
};
|
270
|
+
return getStyleWithVendor(_extends({}, sizeStyle, {
|
271
|
+
transitionDuration: getTransition() + "ms"
|
272
|
+
}));
|
273
|
+
}
|
274
|
+
|
244
275
|
function renderContent(pane, index) {
|
245
276
|
var contentProps = {
|
246
277
|
key: index,
|
@@ -250,32 +281,39 @@ var TabPane = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
250
281
|
ref: function ref(r) {
|
251
282
|
return panesRef.current[index] = r;
|
252
283
|
}
|
253
|
-
};
|
284
|
+
};
|
285
|
+
var energySavingStyle = getEnergySavingPaneStyle(index); // 是滚动模式或在加载范围内,直接渲染
|
254
286
|
// @en Render directly when in scroll mode or in loading scope
|
255
287
|
|
256
288
|
if (mode === 'scroll' || index >= shownIndexes[0] && index <= shownIndexes[1]) {
|
257
|
-
return /*#__PURE__*/React.createElement("div", contentProps,
|
258
|
-
|
289
|
+
return /*#__PURE__*/React.createElement("div", _extends({}, contentProps, {
|
290
|
+
style: energySavingStyle
|
291
|
+
}), pane);
|
292
|
+
}
|
293
|
+
|
294
|
+
var energySavingHideStyle = _extends({}, energySavingStyle, hideContentStyle || {}); // 不在加载范围内,视renderHideContent和hideContentStyle情况而定
|
259
295
|
// @en Not in the loading range, depending on renderHideContent and hideContentStyle
|
260
296
|
|
261
297
|
|
262
298
|
if (renderHideContent) {
|
263
299
|
return /*#__PURE__*/React.createElement("div", _extends({}, contentProps, {
|
264
|
-
style:
|
300
|
+
style: energySavingHideStyle
|
265
301
|
}), renderHideContent(index, pane));
|
266
302
|
}
|
267
303
|
|
268
304
|
if (hideContentStyle === null) {
|
269
|
-
return /*#__PURE__*/React.createElement("div", contentProps
|
305
|
+
return /*#__PURE__*/React.createElement("div", _extends({}, contentProps, {
|
306
|
+
style: energySavingStyle
|
307
|
+
}));
|
270
308
|
}
|
271
309
|
|
272
310
|
return /*#__PURE__*/React.createElement("div", _extends({}, contentProps, {
|
273
|
-
style:
|
311
|
+
style: energySavingHideStyle
|
274
312
|
}), pane);
|
275
313
|
}
|
276
314
|
|
277
315
|
return /*#__PURE__*/React.createElement("div", {
|
278
|
-
className: cls(prefix + "-container", tabDirection, "mode-" + mode, tabPaneClass, {
|
316
|
+
className: cls(prefix + "-container", tabDirection, swipeEnergySaving ? "mode-" + mode + "-energy-saving" : "mode-" + mode, tabPaneClass, {
|
279
317
|
'full-screen': fullScreen
|
280
318
|
}, (_cls = {}, _cls["mode-scroll-" + (scrollVertical ? 'vertical' : 'horizontal')] = mode === 'scroll', _cls)),
|
281
319
|
style: getPaneStyle(),
|
package/esm/tabs/type.d.ts
CHANGED
@@ -322,6 +322,12 @@ export interface TabsProps {
|
|
322
322
|
* @default true
|
323
323
|
*/
|
324
324
|
translateZ?: boolean;
|
325
|
+
/**
|
326
|
+
* 是否启用滑动节能模式,开启后TabPane外层容器不会随panes数量撑开并提升为合成层,仅滑动当前选中的pane,其他pane在选中前将被隐藏
|
327
|
+
* @en Whether to enable the energy-saving sliding mode. After opening, the outer container of the TabPane will not expand with the number of panes and be promoted to a composite layer. Only the currently selected pane will be slid, and other panes will be hidden before being selected.
|
328
|
+
* @default false
|
329
|
+
*/
|
330
|
+
swipeEnergySaving?: boolean;
|
325
331
|
/**
|
326
332
|
* 当滑到第一页或最后一页,还想再滑动时触发
|
327
333
|
* @en Triggered when swiping to the first or last page and want to swipe again
|
@@ -560,7 +566,7 @@ export interface TabCellRef {
|
|
560
566
|
*/
|
561
567
|
resetUnderlineStyle: () => void;
|
562
568
|
}
|
563
|
-
export interface TabPaneProps extends Pick<TabsProps, 'duration' | 'transitionDuration' | 'lazyloadCount' | 'hideContentStyle' | 'renderHideContent' | 'mode' | 'tabPaneClass' | 'tabPaneStyle' | 'tabPaneExtra' | 'getScrollContainer' | 'scrollThrottle' | 'scrollOffset' | 'goLastWhenScrollBottom' | 'scrollVertical' | 'translateZ' | 'fullScreen' | 'autoHeight' | 'onScroll'> {
|
569
|
+
export interface TabPaneProps extends Pick<TabsProps, 'duration' | 'transitionDuration' | 'lazyloadCount' | 'hideContentStyle' | 'renderHideContent' | 'mode' | 'tabPaneClass' | 'tabPaneStyle' | 'tabPaneExtra' | 'getScrollContainer' | 'scrollThrottle' | 'scrollOffset' | 'goLastWhenScrollBottom' | 'scrollVertical' | 'translateZ' | 'fullScreen' | 'autoHeight' | 'onScroll' | 'swipeEnergySaving'> {
|
564
570
|
prefixCls?: string;
|
565
571
|
panes: ReactNodeArray;
|
566
572
|
activeIndex: number;
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@arco-design/mobile-react",
|
3
|
-
"version": "2.27.
|
3
|
+
"version": "2.27.4",
|
4
4
|
"description": "",
|
5
5
|
"main": "cjs/index.js",
|
6
6
|
"module": "esm/index.js",
|
@@ -15,7 +15,7 @@
|
|
15
15
|
"author": "taoyiyue@bytedance.com",
|
16
16
|
"license": "ISC",
|
17
17
|
"dependencies": {
|
18
|
-
"@arco-design/mobile-utils": "2.15.
|
18
|
+
"@arco-design/mobile-utils": "2.15.4",
|
19
19
|
"@arco-design/transformable": "^1.0.0",
|
20
20
|
"lodash.throttle": "^4.1.1",
|
21
21
|
"resize-observer-polyfill": "^1.5.1"
|
@@ -35,5 +35,5 @@
|
|
35
35
|
"publishConfig": {
|
36
36
|
"access": "public"
|
37
37
|
},
|
38
|
-
"gitHead": "
|
38
|
+
"gitHead": "1ae5c477f0f78e51fd883214b25923a4dcfea8bb"
|
39
39
|
}
|
package/umd/form/type.js
CHANGED
@@ -15,6 +15,8 @@
|
|
15
15
|
|
16
16
|
_exports.__esModule = true;
|
17
17
|
_exports.ValidateStatus = _exports.FormInternalComponentType = void 0;
|
18
|
+
// 注意:自动识别form关联组件的依据,请勿轻易改变代码结构
|
19
|
+
// Notice: Automatically identify the basis of the associated component of the form, DO NOT change the code structure.
|
18
20
|
var FormInternalComponentType;
|
19
21
|
_exports.FormInternalComponentType = FormInternalComponentType;
|
20
22
|
|
package/umd/index-bar/utils.js
CHANGED
@@ -1,16 +1,16 @@
|
|
1
1
|
(function (global, factory) {
|
2
2
|
if (typeof define === "function" && define.amd) {
|
3
|
-
define(["exports", "react"
|
3
|
+
define(["exports", "react"], factory);
|
4
4
|
} else if (typeof exports !== "undefined") {
|
5
|
-
factory(exports, require("react")
|
5
|
+
factory(exports, require("react"));
|
6
6
|
} else {
|
7
7
|
var mod = {
|
8
8
|
exports: {}
|
9
9
|
};
|
10
|
-
factory(mod.exports, global.react
|
10
|
+
factory(mod.exports, global.react);
|
11
11
|
global.utils = mod.exports;
|
12
12
|
}
|
13
|
-
})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react
|
13
|
+
})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react) {
|
14
14
|
"use strict";
|
15
15
|
|
16
16
|
_exports.__esModule = true;
|
@@ -23,7 +23,7 @@
|
|
23
23
|
var validChildren = [];
|
24
24
|
|
25
25
|
_react.Children.forEach(children, function (child) {
|
26
|
-
if (! /*#__PURE__*/(0, _react.isValidElement)(child)
|
26
|
+
if (! /*#__PURE__*/(0, _react.isValidElement)(child)) {
|
27
27
|
console.warn('<IndexBar /> only accept <IndexBar.Group /> as the children');
|
28
28
|
return;
|
29
29
|
}
|
@@ -239,8 +239,9 @@
|
|
239
239
|
onOnceEmittedListeners[key] = [];
|
240
240
|
}, []);
|
241
241
|
|
242
|
-
function handleCheckChildrenExist() {
|
243
|
-
|
242
|
+
function handleCheckChildrenExist(target) {
|
243
|
+
var dom = target || domRef.current;
|
244
|
+
return isChildrenExist.current && (dom == null ? void 0 : dom.children.length);
|
244
245
|
}
|
245
246
|
|
246
247
|
function handleObserverStatusChange(entries) {
|
@@ -260,7 +261,7 @@
|
|
260
261
|
* @en Callback when the visible status of current element changes before the comparison
|
261
262
|
*/
|
262
263
|
|
263
|
-
isIntersecting !== curVisible && handleCheckChildrenExist() && onCompVisibleChange(isIntersecting, target);
|
264
|
+
isIntersecting !== curVisible && handleCheckChildrenExist(target) && onCompVisibleChange(isIntersecting, target);
|
264
265
|
/**
|
265
266
|
* 当前元素状态由不可见变为可见,且只触发一次
|
266
267
|
* @en The current element is invisible -> visible, and once, triggers the callback
|
package/umd/tabs/index.js
CHANGED
@@ -147,7 +147,9 @@
|
|
147
147
|
fullScreen = props.fullScreen,
|
148
148
|
autoHeight = props.autoHeight,
|
149
149
|
_props$tabBarStopProp = props.tabBarStopPropagation,
|
150
|
-
tabBarStopPropagation = _props$tabBarStopProp === void 0 ? true : _props$tabBarStopProp
|
150
|
+
tabBarStopPropagation = _props$tabBarStopProp === void 0 ? true : _props$tabBarStopProp,
|
151
|
+
_props$swipeEnergySav = props.swipeEnergySaving,
|
152
|
+
swipeEnergySaving = _props$swipeEnergySav === void 0 ? false : _props$swipeEnergySav;
|
151
153
|
var domRef = (0, _react.useRef)(null);
|
152
154
|
var cellRef = (0, _react.useRef)(null);
|
153
155
|
var paneRef = (0, _react.useRef)(null);
|
@@ -534,7 +536,8 @@
|
|
534
536
|
tabPaneClass: tabPaneClass,
|
535
537
|
tabPaneExtra: tabPaneExtra,
|
536
538
|
autoHeight: autoHeight,
|
537
|
-
onScroll: onScroll
|
539
|
+
onScroll: onScroll,
|
540
|
+
swipeEnergySaving: swipeEnergySaving
|
538
541
|
}, commonProps)));
|
539
542
|
});
|
540
543
|
});
|
@@ -473,6 +473,10 @@
|
|
473
473
|
-webkit-transition-timing-function: ease-out;
|
474
474
|
transition-timing-function: ease-out;
|
475
475
|
}
|
476
|
+
.arco-tab-pane-container.mode-swipe-energy-saving {
|
477
|
+
position: relative;
|
478
|
+
overflow: hidden;
|
479
|
+
}
|
476
480
|
.arco-tab-pane-container.full-screen {
|
477
481
|
-webkit-box-flex: 1;
|
478
482
|
-webkit-flex: 1;
|
package/umd/tabs/tab-pane.js
CHANGED
@@ -56,6 +56,7 @@
|
|
56
56
|
translateZ = props.translateZ,
|
57
57
|
fullScreen = props.fullScreen,
|
58
58
|
autoHeight = props.autoHeight,
|
59
|
+
swipeEnergySaving = props.swipeEnergySaving,
|
59
60
|
changeIndex = props.changeIndex,
|
60
61
|
onScroll = props.onScroll;
|
61
62
|
var domRef = (0, _react.useRef)(null);
|
@@ -67,12 +68,16 @@
|
|
67
68
|
shownIndexes = _useState[0],
|
68
69
|
setShownIndexes = _useState[1];
|
69
70
|
|
71
|
+
var _useState2 = (0, _react.useState)(activeIndex),
|
72
|
+
shownActiveIndex = _useState2[0],
|
73
|
+
setShownActiveIndex = _useState2[1];
|
74
|
+
|
70
75
|
var prefix = prefixCls + "-tab-pane";
|
71
76
|
var handleTouchEnd = swipeable ? handlePaneTouchEnd : void 0;
|
72
77
|
|
73
|
-
var
|
74
|
-
currentPaneHeight =
|
75
|
-
setCurrentPaneHeight =
|
78
|
+
var _useState3 = (0, _react.useState)('auto'),
|
79
|
+
currentPaneHeight = _useState3[0],
|
80
|
+
setCurrentPaneHeight = _useState3[1];
|
76
81
|
|
77
82
|
(0, _react.useImperativeHandle)(ref, function () {
|
78
83
|
return {
|
@@ -158,6 +163,8 @@
|
|
158
163
|
}
|
159
164
|
|
160
165
|
function calcShownIndexes() {
|
166
|
+
setShownActiveIndex(activeIndex);
|
167
|
+
|
161
168
|
if (typeof lazyloadCount === 'number') {
|
162
169
|
setShownIndexes([activeIndex - lazyloadCount, activeIndex + lazyloadCount]);
|
163
170
|
return;
|
@@ -258,11 +265,35 @@
|
|
258
265
|
var heightStyle = currentPaneHeight && currentPaneHeight !== 'auto' ? {
|
259
266
|
height: currentPaneHeight
|
260
267
|
} : {};
|
261
|
-
return (0, _helpers.getStyleWithVendor)((0, _extends2.default)({}, sizeStyle, {
|
268
|
+
return (0, _helpers.getStyleWithVendor)((0, _extends2.default)({}, swipeEnergySaving ? {} : sizeStyle, {
|
262
269
|
transitionDuration: getTransition() + "ms"
|
263
270
|
}, heightStyle, commonStyle));
|
264
271
|
}
|
265
272
|
|
273
|
+
function getEnergySavingPaneStyle(index) {
|
274
|
+
if (mode === 'scroll' || !swipeEnergySaving) {
|
275
|
+
return undefined;
|
276
|
+
}
|
277
|
+
|
278
|
+
if (index !== shownActiveIndex) {
|
279
|
+
return {
|
280
|
+
position: 'absolute',
|
281
|
+
left: '-100%',
|
282
|
+
top: '-100%'
|
283
|
+
};
|
284
|
+
}
|
285
|
+
|
286
|
+
var translateStr = translateZ ? ' translateZ(0)' : '';
|
287
|
+
var sizeStyle = tabDirection === 'vertical' ? {
|
288
|
+
transform: "translateX(" + (distance - wrapWidth * (activeIndex - index)) + "px)" + translateStr
|
289
|
+
} : {
|
290
|
+
transform: "translateY(" + (distance - wrapHeight * (activeIndex - index)) + "px)" + translateStr
|
291
|
+
};
|
292
|
+
return (0, _helpers.getStyleWithVendor)((0, _extends2.default)({}, sizeStyle, {
|
293
|
+
transitionDuration: getTransition() + "ms"
|
294
|
+
}));
|
295
|
+
}
|
296
|
+
|
266
297
|
function renderContent(pane, index) {
|
267
298
|
var contentProps = {
|
268
299
|
key: index,
|
@@ -272,32 +303,38 @@
|
|
272
303
|
ref: function ref(r) {
|
273
304
|
return panesRef.current[index] = r;
|
274
305
|
}
|
275
|
-
};
|
306
|
+
};
|
307
|
+
var energySavingStyle = getEnergySavingPaneStyle(index); // 是滚动模式或在加载范围内,直接渲染
|
276
308
|
// @en Render directly when in scroll mode or in loading scope
|
277
309
|
|
278
310
|
if (mode === 'scroll' || index >= shownIndexes[0] && index <= shownIndexes[1]) {
|
279
|
-
return /*#__PURE__*/_react.default.createElement("div", contentProps,
|
280
|
-
|
281
|
-
|
311
|
+
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, contentProps, {
|
312
|
+
style: energySavingStyle
|
313
|
+
}), pane);
|
314
|
+
}
|
282
315
|
|
316
|
+
var energySavingHideStyle = (0, _extends2.default)({}, energySavingStyle, hideContentStyle || {}); // 不在加载范围内,视renderHideContent和hideContentStyle情况而定
|
317
|
+
// @en Not in the loading range, depending on renderHideContent and hideContentStyle
|
283
318
|
|
284
319
|
if (renderHideContent) {
|
285
320
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, contentProps, {
|
286
|
-
style:
|
321
|
+
style: energySavingHideStyle
|
287
322
|
}), renderHideContent(index, pane));
|
288
323
|
}
|
289
324
|
|
290
325
|
if (hideContentStyle === null) {
|
291
|
-
return /*#__PURE__*/_react.default.createElement("div", contentProps
|
326
|
+
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, contentProps, {
|
327
|
+
style: energySavingStyle
|
328
|
+
}));
|
292
329
|
}
|
293
330
|
|
294
331
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, contentProps, {
|
295
|
-
style:
|
332
|
+
style: energySavingHideStyle
|
296
333
|
}), pane);
|
297
334
|
}
|
298
335
|
|
299
336
|
return /*#__PURE__*/_react.default.createElement("div", {
|
300
|
-
className: (0, _mobileUtils.cls)(prefix + "-container", tabDirection, "mode-" + mode, tabPaneClass, {
|
337
|
+
className: (0, _mobileUtils.cls)(prefix + "-container", tabDirection, swipeEnergySaving ? "mode-" + mode + "-energy-saving" : "mode-" + mode, tabPaneClass, {
|
301
338
|
'full-screen': fullScreen
|
302
339
|
}, (_cls = {}, _cls["mode-scroll-" + (scrollVertical ? 'vertical' : 'horizontal')] = mode === 'scroll', _cls)),
|
303
340
|
style: getPaneStyle(),
|
package/umd/tabs/type.d.ts
CHANGED
@@ -322,6 +322,12 @@ export interface TabsProps {
|
|
322
322
|
* @default true
|
323
323
|
*/
|
324
324
|
translateZ?: boolean;
|
325
|
+
/**
|
326
|
+
* 是否启用滑动节能模式,开启后TabPane外层容器不会随panes数量撑开并提升为合成层,仅滑动当前选中的pane,其他pane在选中前将被隐藏
|
327
|
+
* @en Whether to enable the energy-saving sliding mode. After opening, the outer container of the TabPane will not expand with the number of panes and be promoted to a composite layer. Only the currently selected pane will be slid, and other panes will be hidden before being selected.
|
328
|
+
* @default false
|
329
|
+
*/
|
330
|
+
swipeEnergySaving?: boolean;
|
325
331
|
/**
|
326
332
|
* 当滑到第一页或最后一页,还想再滑动时触发
|
327
333
|
* @en Triggered when swiping to the first or last page and want to swipe again
|
@@ -560,7 +566,7 @@ export interface TabCellRef {
|
|
560
566
|
*/
|
561
567
|
resetUnderlineStyle: () => void;
|
562
568
|
}
|
563
|
-
export interface TabPaneProps extends Pick<TabsProps, 'duration' | 'transitionDuration' | 'lazyloadCount' | 'hideContentStyle' | 'renderHideContent' | 'mode' | 'tabPaneClass' | 'tabPaneStyle' | 'tabPaneExtra' | 'getScrollContainer' | 'scrollThrottle' | 'scrollOffset' | 'goLastWhenScrollBottom' | 'scrollVertical' | 'translateZ' | 'fullScreen' | 'autoHeight' | 'onScroll'> {
|
569
|
+
export interface TabPaneProps extends Pick<TabsProps, 'duration' | 'transitionDuration' | 'lazyloadCount' | 'hideContentStyle' | 'renderHideContent' | 'mode' | 'tabPaneClass' | 'tabPaneStyle' | 'tabPaneExtra' | 'getScrollContainer' | 'scrollThrottle' | 'scrollOffset' | 'goLastWhenScrollBottom' | 'scrollVertical' | 'translateZ' | 'fullScreen' | 'autoHeight' | 'onScroll' | 'swipeEnergySaving'> {
|
564
570
|
prefixCls?: string;
|
565
571
|
panes: ReactNodeArray;
|
566
572
|
activeIndex: number;
|