@arco-design/mobile-react 2.28.1 → 2.29.0
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 +29 -0
- package/README.en-US.md +2 -2
- package/README.md +2 -2
- package/cjs/_helpers/hooks.d.ts +7 -1
- package/cjs/_helpers/hooks.js +9 -5
- package/cjs/form/form-item.js +109 -108
- package/cjs/grid/style/css/index.css +4 -0
- package/cjs/grid/style/index.less +6 -0
- package/cjs/index.d.ts +1 -0
- package/cjs/index.js +5 -1
- package/cjs/nav-bar/index.d.ts +3 -3
- package/cjs/picker-view/components/picker-cell.js +20 -6
- package/cjs/skeleton/demo/style/css/mobile.css +7 -0
- package/cjs/skeleton/demo/style/mobile.less +13 -0
- package/cjs/skeleton/elements.d.ts +7 -0
- package/cjs/skeleton/elements.js +302 -0
- package/cjs/skeleton/index.d.ts +18 -0
- package/cjs/skeleton/index.js +100 -0
- package/cjs/skeleton/skeleton-context.d.ts +3 -0
- package/cjs/skeleton/skeleton-context.js +15 -0
- package/cjs/skeleton/style/css/index.css +180 -0
- package/cjs/skeleton/style/css/index.d.ts +3 -0
- package/cjs/skeleton/style/css/index.js +7 -0
- package/cjs/skeleton/style/index.d.ts +3 -0
- package/cjs/skeleton/style/index.js +7 -0
- package/cjs/skeleton/style/index.less +147 -0
- package/cjs/skeleton/type.d.ts +104 -0
- package/cjs/skeleton/type.js +3 -0
- package/cjs/style.d.ts +1 -0
- package/cjs/style.js +2 -0
- package/cjs/tabs/index.js +8 -2
- package/dist/index.js +532 -147
- package/dist/index.min.js +5 -5
- package/dist/style.css +123 -0
- package/dist/style.min.css +1 -1
- package/esm/_helpers/hooks.d.ts +7 -1
- package/esm/_helpers/hooks.js +8 -2
- package/esm/form/form-item.js +109 -108
- package/esm/grid/style/css/index.css +4 -0
- package/esm/grid/style/index.less +6 -0
- package/esm/index.d.ts +1 -0
- package/esm/index.js +1 -0
- package/esm/nav-bar/index.d.ts +3 -3
- package/esm/picker-view/components/picker-cell.js +20 -6
- package/esm/skeleton/demo/style/css/mobile.css +7 -0
- package/esm/skeleton/demo/style/mobile.less +13 -0
- package/esm/skeleton/elements.d.ts +7 -0
- package/esm/skeleton/elements.js +281 -0
- package/esm/skeleton/index.d.ts +18 -0
- package/esm/skeleton/index.js +82 -0
- package/esm/skeleton/skeleton-context.d.ts +3 -0
- package/esm/skeleton/skeleton-context.js +5 -0
- package/esm/skeleton/style/css/index.css +180 -0
- package/esm/skeleton/style/css/index.d.ts +3 -0
- package/esm/skeleton/style/css/index.js +3 -0
- package/esm/skeleton/style/index.d.ts +3 -0
- package/esm/skeleton/style/index.js +3 -0
- package/esm/skeleton/style/index.less +147 -0
- package/esm/skeleton/type.d.ts +104 -0
- package/esm/skeleton/type.js +1 -0
- package/esm/style.d.ts +1 -0
- package/esm/style.js +1 -0
- package/esm/tabs/index.js +9 -3
- package/package.json +3 -3
- package/tokens/app/arcodesign/default/css-variables.less +16 -0
- package/tokens/app/arcodesign/default/index.d.ts +16 -0
- package/tokens/app/arcodesign/default/index.js +17 -1
- package/tokens/app/arcodesign/default/index.json +190 -0
- package/tokens/app/arcodesign/default/index.less +16 -0
- package/umd/_helpers/hooks.d.ts +7 -1
- package/umd/_helpers/hooks.js +9 -5
- package/umd/form/form-item.js +109 -108
- package/umd/grid/style/css/index.css +4 -0
- package/umd/grid/style/index.less +6 -0
- package/umd/index.d.ts +1 -0
- package/umd/index.js +7 -5
- package/umd/nav-bar/index.d.ts +3 -3
- package/umd/picker-view/components/picker-cell.js +20 -6
- package/umd/skeleton/demo/style/css/mobile.css +7 -0
- package/umd/skeleton/demo/style/mobile.less +13 -0
- package/umd/skeleton/elements.d.ts +7 -0
- package/umd/skeleton/elements.js +306 -0
- package/umd/skeleton/index.d.ts +18 -0
- package/umd/skeleton/index.js +104 -0
- package/umd/skeleton/skeleton-context.d.ts +3 -0
- package/umd/skeleton/skeleton-context.js +28 -0
- package/umd/skeleton/style/css/index.css +180 -0
- package/umd/skeleton/style/css/index.d.ts +3 -0
- package/umd/skeleton/style/css/index.js +15 -0
- package/umd/skeleton/style/index.d.ts +3 -0
- package/umd/skeleton/style/index.js +15 -0
- package/umd/skeleton/style/index.less +147 -0
- package/umd/skeleton/type.d.ts +104 -0
- package/umd/skeleton/type.js +17 -0
- package/umd/style.d.ts +1 -0
- package/umd/style.js +4 -4
- package/umd/tabs/index.js +8 -2
@@ -0,0 +1,180 @@
|
|
1
|
+
.arco-skeleton {
|
2
|
+
position: relative;
|
3
|
+
color: rgba(255, 255, 255, 0.6) ;
|
4
|
+
}
|
5
|
+
.arco-skeleton-title {
|
6
|
+
height: 0.32rem ;
|
7
|
+
}
|
8
|
+
.arco-skeleton-paragraph-line {
|
9
|
+
width: 100%;
|
10
|
+
height: 0.32rem ;
|
11
|
+
}
|
12
|
+
.arco-skeleton-paragraph-line + .arco-skeleton-paragraph-line {
|
13
|
+
margin-top: 0.24rem ;
|
14
|
+
}
|
15
|
+
.arco-skeleton-avatar.arco-skeleton-item {
|
16
|
+
width: 0.64rem ;
|
17
|
+
height: 0.64rem ;
|
18
|
+
border-radius: 100%;
|
19
|
+
-webkit-transform: translateZ(0);
|
20
|
+
transform: translateZ(0);
|
21
|
+
}
|
22
|
+
.arco-skeleton-content {
|
23
|
+
width: 100%;
|
24
|
+
}
|
25
|
+
.arco-skeleton-content .arco-skeleton-title + .arco-skeleton-paragraph {
|
26
|
+
margin-top: 0.4rem ;
|
27
|
+
}
|
28
|
+
.arco-skeleton-with-avatar {
|
29
|
+
display: -webkit-box;
|
30
|
+
display: -webkit-flex;
|
31
|
+
display: flex;
|
32
|
+
-webkit-box-align: start;
|
33
|
+
-webkit-align-items: flex-start;
|
34
|
+
align-items: flex-start;
|
35
|
+
}
|
36
|
+
.arco-skeleton-with-avatar .arco-skeleton-avatar {
|
37
|
+
-webkit-box-flex: 0;
|
38
|
+
-webkit-flex: none;
|
39
|
+
flex: none;
|
40
|
+
}
|
41
|
+
.arco-skeleton-with-avatar .arco-skeleton-content .arco-skeleton-title {
|
42
|
+
margin-top: 0.16rem ;
|
43
|
+
}
|
44
|
+
.arco-skeleton-with-avatar .arco-skeleton-avatar + .arco-skeleton-content {
|
45
|
+
margin-left: 0.16rem ;
|
46
|
+
}
|
47
|
+
[dir="rtl"] .arco-skeleton-with-avatar .arco-skeleton-avatar + .arco-skeleton-content {
|
48
|
+
margin-left: initial;
|
49
|
+
margin-right: 0.16rem ;
|
50
|
+
}
|
51
|
+
.arco-skeleton-grid {
|
52
|
+
display: -webkit-box;
|
53
|
+
display: -webkit-flex;
|
54
|
+
display: flex;
|
55
|
+
-webkit-box-pack: justify;
|
56
|
+
-webkit-justify-content: space-between;
|
57
|
+
justify-content: space-between;
|
58
|
+
width: 100%;
|
59
|
+
}
|
60
|
+
.arco-skeleton-grid-item {
|
61
|
+
display: -webkit-box;
|
62
|
+
display: -webkit-flex;
|
63
|
+
display: flex;
|
64
|
+
-webkit-box-orient: vertical;
|
65
|
+
-webkit-box-direction: normal;
|
66
|
+
-webkit-flex-direction: column;
|
67
|
+
flex-direction: column;
|
68
|
+
-webkit-box-align: center;
|
69
|
+
-webkit-align-items: center;
|
70
|
+
align-items: center;
|
71
|
+
}
|
72
|
+
.arco-skeleton-grid-icon {
|
73
|
+
width: 0.64rem ;
|
74
|
+
height: 0.64rem ;
|
75
|
+
}
|
76
|
+
.arco-skeleton-grid-text {
|
77
|
+
margin-top: 0.16rem ;
|
78
|
+
width: 1.28rem ;
|
79
|
+
height: 0.32rem ;
|
80
|
+
}
|
81
|
+
.arco-skeleton-node {
|
82
|
+
display: inline-block;
|
83
|
+
}
|
84
|
+
.arco-skeleton-item {
|
85
|
+
position: relative;
|
86
|
+
overflow: hidden;
|
87
|
+
border-radius: 0 ;
|
88
|
+
background-color: #F2F3F5 ;
|
89
|
+
}
|
90
|
+
.arco-skeleton-animation-item {
|
91
|
+
position: absolute;
|
92
|
+
width: 100vw;
|
93
|
+
height: 100%;
|
94
|
+
top: 0;
|
95
|
+
left: 0;
|
96
|
+
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 35%, currentColor 50%, rgba(255, 255, 255, 0) 65%);
|
97
|
+
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 35%, currentColor 50%, rgba(255, 255, 255, 0) 65%);
|
98
|
+
-webkit-transform-origin: top left;
|
99
|
+
transform-origin: top left;
|
100
|
+
-webkit-animation-name: skeleton-gradient;
|
101
|
+
animation-name: skeleton-gradient;
|
102
|
+
-webkit-animation-iteration-count: infinite;
|
103
|
+
animation-iteration-count: infinite;
|
104
|
+
-webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1) ;
|
105
|
+
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1) ;
|
106
|
+
-webkit-animation-duration: 1.5s ;
|
107
|
+
animation-duration: 1.5s ;
|
108
|
+
}
|
109
|
+
[dir="rtl"] .arco-skeleton-animation-item {
|
110
|
+
-webkit-animation-name: skeleton-gradient-reverse;
|
111
|
+
animation-name: skeleton-gradient-reverse;
|
112
|
+
}
|
113
|
+
.arco-skeleton-animation-breath {
|
114
|
+
-webkit-animation: skeleton-breath linear infinite;
|
115
|
+
animation: skeleton-breath linear infinite;
|
116
|
+
-webkit-animation-duration: 1.5s ;
|
117
|
+
animation-duration: 1.5s ;
|
118
|
+
}
|
119
|
+
@-webkit-keyframes skeleton-gradient {
|
120
|
+
0% {
|
121
|
+
-webkit-transform: translateX(-65%) skewX(-45deg);
|
122
|
+
transform: translateX(-65%) skewX(-45deg);
|
123
|
+
}
|
124
|
+
100% {
|
125
|
+
-webkit-transform: translateX(135%) skewX(-45deg);
|
126
|
+
transform: translateX(135%) skewX(-45deg);
|
127
|
+
}
|
128
|
+
}
|
129
|
+
@keyframes skeleton-gradient {
|
130
|
+
0% {
|
131
|
+
-webkit-transform: translateX(-65%) skewX(-45deg);
|
132
|
+
transform: translateX(-65%) skewX(-45deg);
|
133
|
+
}
|
134
|
+
100% {
|
135
|
+
-webkit-transform: translateX(135%) skewX(-45deg);
|
136
|
+
transform: translateX(135%) skewX(-45deg);
|
137
|
+
}
|
138
|
+
}
|
139
|
+
@-webkit-keyframes skeleton-gradient-reverse {
|
140
|
+
0% {
|
141
|
+
-webkit-transform: translateX(65%) skewX(45deg);
|
142
|
+
transform: translateX(65%) skewX(45deg);
|
143
|
+
}
|
144
|
+
100% {
|
145
|
+
-webkit-transform: translateX(-135%) skewX(45deg);
|
146
|
+
transform: translateX(-135%) skewX(45deg);
|
147
|
+
}
|
148
|
+
}
|
149
|
+
@keyframes skeleton-gradient-reverse {
|
150
|
+
0% {
|
151
|
+
-webkit-transform: translateX(65%) skewX(45deg);
|
152
|
+
transform: translateX(65%) skewX(45deg);
|
153
|
+
}
|
154
|
+
100% {
|
155
|
+
-webkit-transform: translateX(-135%) skewX(45deg);
|
156
|
+
transform: translateX(-135%) skewX(45deg);
|
157
|
+
}
|
158
|
+
}
|
159
|
+
@-webkit-keyframes skeleton-breath {
|
160
|
+
0% {
|
161
|
+
opacity: 1;
|
162
|
+
}
|
163
|
+
50% {
|
164
|
+
opacity: 0.4 ;
|
165
|
+
}
|
166
|
+
100% {
|
167
|
+
opacity: 1;
|
168
|
+
}
|
169
|
+
}
|
170
|
+
@keyframes skeleton-breath {
|
171
|
+
0% {
|
172
|
+
opacity: 1;
|
173
|
+
}
|
174
|
+
50% {
|
175
|
+
opacity: 0.4 ;
|
176
|
+
}
|
177
|
+
100% {
|
178
|
+
opacity: 1;
|
179
|
+
}
|
180
|
+
}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
(function (global, factory) {
|
2
|
+
if (typeof define === "function" && define.amd) {
|
3
|
+
define(["../../../../style/css/public.css", "../../../avatar/style/css", "./index.css"], factory);
|
4
|
+
} else if (typeof exports !== "undefined") {
|
5
|
+
factory(require("../../../../style/css/public.css"), require("../../../avatar/style/css"), require("./index.css"));
|
6
|
+
} else {
|
7
|
+
var mod = {
|
8
|
+
exports: {}
|
9
|
+
};
|
10
|
+
factory(global._public, global.style, global.index);
|
11
|
+
global.index = mod.exports;
|
12
|
+
}
|
13
|
+
})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _style, _index) {
|
14
|
+
"use strict";
|
15
|
+
});
|
@@ -0,0 +1,15 @@
|
|
1
|
+
(function (global, factory) {
|
2
|
+
if (typeof define === "function" && define.amd) {
|
3
|
+
define(["../../../style/public.less", "../../avatar/style", "./index.less"], factory);
|
4
|
+
} else if (typeof exports !== "undefined") {
|
5
|
+
factory(require("../../../style/public.less"), require("../../avatar/style"), require("./index.less"));
|
6
|
+
} else {
|
7
|
+
var mod = {
|
8
|
+
exports: {}
|
9
|
+
};
|
10
|
+
factory(global._public, global.style, global.index);
|
11
|
+
global.index = mod.exports;
|
12
|
+
}
|
13
|
+
})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _style, _index) {
|
14
|
+
"use strict";
|
15
|
+
});
|
@@ -0,0 +1,147 @@
|
|
1
|
+
@import '../../../style/mixin.less';
|
2
|
+
|
3
|
+
.@{prefix}-skeleton {
|
4
|
+
position: relative;
|
5
|
+
.use-var(color, skeleton-gradient-animation-color);
|
6
|
+
}
|
7
|
+
|
8
|
+
.@{prefix}-skeleton-title {
|
9
|
+
.use-var(height, skeleton-title-height);
|
10
|
+
}
|
11
|
+
|
12
|
+
.@{prefix}-skeleton-paragraph {
|
13
|
+
&-line {
|
14
|
+
width: 100%;
|
15
|
+
.use-var(height, skeleton-paragraph-height);
|
16
|
+
}
|
17
|
+
|
18
|
+
&-line + &-line {
|
19
|
+
.use-var(margin-top, skeleton-paragraph-margin-top);
|
20
|
+
}
|
21
|
+
}
|
22
|
+
|
23
|
+
.@{prefix}-skeleton-avatar.@{prefix}-skeleton-item {
|
24
|
+
.use-var(width, skeleton-avatar-size);
|
25
|
+
.use-var(height, skeleton-avatar-size);
|
26
|
+
border-radius: 100%;
|
27
|
+
transform: translateZ(0);
|
28
|
+
}
|
29
|
+
|
30
|
+
.@{prefix}-skeleton-content {
|
31
|
+
width: 100%;
|
32
|
+
|
33
|
+
.@{prefix}-skeleton-title + .@{prefix}-skeleton-paragraph {
|
34
|
+
.use-var(margin-top, skeleton-large-gutter);
|
35
|
+
}
|
36
|
+
}
|
37
|
+
|
38
|
+
.@{prefix}-skeleton-with-avatar {
|
39
|
+
display: flex;
|
40
|
+
align-items: flex-start;
|
41
|
+
|
42
|
+
.@{prefix}-skeleton-avatar {
|
43
|
+
flex: none;
|
44
|
+
}
|
45
|
+
|
46
|
+
.@{prefix}-skeleton-content {
|
47
|
+
.@{prefix}-skeleton-title {
|
48
|
+
.use-var(margin-top, skeleton-medium-gutter);
|
49
|
+
}
|
50
|
+
}
|
51
|
+
|
52
|
+
.@{prefix}-skeleton-avatar + .@{prefix}-skeleton-content {
|
53
|
+
.use-var-with-rtl(margin-left, skeleton-medium-gutter);
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
.@{prefix}-skeleton-grid {
|
58
|
+
display: flex;
|
59
|
+
justify-content: space-between;
|
60
|
+
width: 100%;
|
61
|
+
|
62
|
+
&-item {
|
63
|
+
display: flex;
|
64
|
+
flex-direction: column;
|
65
|
+
align-items: center;
|
66
|
+
}
|
67
|
+
&-icon {
|
68
|
+
.use-var(width, skeleton-grid-icon-size);
|
69
|
+
.use-var(height, skeleton-grid-icon-size);
|
70
|
+
}
|
71
|
+
&-text {
|
72
|
+
.use-var(margin-top, skeleton-medium-gutter);
|
73
|
+
.use-var(width, skeleton-grid-text-width);
|
74
|
+
.use-var(height, skeleton-grid-text-height);
|
75
|
+
}
|
76
|
+
}
|
77
|
+
|
78
|
+
.@{prefix}-skeleton-node {
|
79
|
+
display: inline-block;
|
80
|
+
}
|
81
|
+
|
82
|
+
.@{prefix}-skeleton-item {
|
83
|
+
position: relative;
|
84
|
+
overflow: hidden;
|
85
|
+
.use-var(border-radius, skeleton-border-radius);
|
86
|
+
.use-var(background-color, skeleton-background-color);
|
87
|
+
}
|
88
|
+
|
89
|
+
.@{prefix}-skeleton-animation-item {
|
90
|
+
position: absolute;
|
91
|
+
width: 100vw;
|
92
|
+
height: 100%;
|
93
|
+
top: 0;
|
94
|
+
left: 0;
|
95
|
+
background-image: linear-gradient(
|
96
|
+
90deg,
|
97
|
+
rgba(255, 255, 255, 0) 35%,
|
98
|
+
currentColor 50%,
|
99
|
+
rgba(255, 255, 255, 0) 65%
|
100
|
+
);
|
101
|
+
transform-origin: top left;
|
102
|
+
animation-name: skeleton-gradient;
|
103
|
+
animation-iteration-count: infinite;
|
104
|
+
.use-var(animation-timing-function, skeleton-gradient-animation-timing-function);
|
105
|
+
.use-var(animation-duration, skeleton-gradient-animation-duration);
|
106
|
+
[dir="rtl"] & {
|
107
|
+
animation-name: skeleton-gradient-reverse;
|
108
|
+
}
|
109
|
+
}
|
110
|
+
.@{prefix}-skeleton-animation-breath {
|
111
|
+
animation: skeleton-breath linear infinite;
|
112
|
+
.use-var(animation-duration, skeleton-breath-animation-duration);
|
113
|
+
}
|
114
|
+
|
115
|
+
@keyframes skeleton-gradient {
|
116
|
+
0% {
|
117
|
+
transform: translateX(-65%) skewX(-45deg);
|
118
|
+
}
|
119
|
+
|
120
|
+
100% {
|
121
|
+
transform: translateX(135%) skewX(-45deg);
|
122
|
+
}
|
123
|
+
}
|
124
|
+
|
125
|
+
@keyframes skeleton-gradient-reverse {
|
126
|
+
0% {
|
127
|
+
transform: translateX(65%) skewX(45deg);
|
128
|
+
}
|
129
|
+
|
130
|
+
100% {
|
131
|
+
transform: translateX(-135%) skewX(45deg);
|
132
|
+
}
|
133
|
+
}
|
134
|
+
|
135
|
+
@keyframes skeleton-breath {
|
136
|
+
0% {
|
137
|
+
opacity: 1;
|
138
|
+
}
|
139
|
+
|
140
|
+
50% {
|
141
|
+
.use-var(opacity, skeleton-breath-opacity);
|
142
|
+
}
|
143
|
+
|
144
|
+
100% {
|
145
|
+
opacity: 1;
|
146
|
+
}
|
147
|
+
}
|
@@ -0,0 +1,104 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { BaseProps, SimpleBaseProps } from '../_helpers';
|
3
|
+
export interface SkeletonProps extends SimpleBaseProps {
|
4
|
+
/**
|
5
|
+
* 是否显示标题占位图
|
6
|
+
* @en Show title placeholder
|
7
|
+
* @default true
|
8
|
+
*/
|
9
|
+
title?: boolean | SkeletonTitleProps;
|
10
|
+
/**
|
11
|
+
* 是否显示段落占位图
|
12
|
+
* @en Show paragraph placeholder
|
13
|
+
* @default true
|
14
|
+
*/
|
15
|
+
paragraph?: boolean | SkeletonParagraphProps;
|
16
|
+
/**
|
17
|
+
* 是否显示头像占位图
|
18
|
+
* @en Show Avatar placeholder
|
19
|
+
* @default false
|
20
|
+
*/
|
21
|
+
avatar?: boolean | SkeletonAvatarProps;
|
22
|
+
/**
|
23
|
+
* 是否显示金刚位占位图(如该参数非空时,默认展示四列金刚位,且不展示标题/段落/头像占位符)
|
24
|
+
* @en Show Grid placeholder. When it's value is present, the paragraph, avatar or title placeholder will not be displayed, and four columns will be displayed by default
|
25
|
+
* @default false
|
26
|
+
*/
|
27
|
+
grid?: boolean | SkeletonGridProps;
|
28
|
+
/**
|
29
|
+
* 是否展示动画效果
|
30
|
+
* @en Show loading effect
|
31
|
+
* @default true
|
32
|
+
*/
|
33
|
+
showAnimation?: boolean;
|
34
|
+
/**
|
35
|
+
* 加载动画效果,可选“扫光”、“呼吸”两种效果
|
36
|
+
* @en Animation of loading effect, 'gradient' and 'breath' effects are optional
|
37
|
+
* @default "gradient"
|
38
|
+
*/
|
39
|
+
animation?: 'gradient' | 'breath';
|
40
|
+
/**
|
41
|
+
* 扫光动效高光颜色
|
42
|
+
* @en Highlight color of gradient animation
|
43
|
+
* @default "rgba(0, 0, 0, 0.04)"
|
44
|
+
*/
|
45
|
+
animationGradientColor?: string;
|
46
|
+
/**
|
47
|
+
* 占位块背景色
|
48
|
+
* @en Background color of skeleton item
|
49
|
+
* @default "#F7F8FA"
|
50
|
+
*/
|
51
|
+
backgroundColor?: string;
|
52
|
+
/**
|
53
|
+
* 子元素
|
54
|
+
* @en Children element
|
55
|
+
* @default null
|
56
|
+
*/
|
57
|
+
children?: React.ReactNode;
|
58
|
+
}
|
59
|
+
export interface SkeletonTitleProps extends SimpleBaseProps {
|
60
|
+
/**
|
61
|
+
* 标题占位图宽度
|
62
|
+
* @en The width of title
|
63
|
+
* @default "40%"
|
64
|
+
*/
|
65
|
+
width?: number | string;
|
66
|
+
}
|
67
|
+
export interface SkeletonParagraphProps extends SimpleBaseProps {
|
68
|
+
/**
|
69
|
+
* 段落占位图的行数
|
70
|
+
* @en Number of lines for paragraph
|
71
|
+
* @default 3
|
72
|
+
*/
|
73
|
+
rows?: number;
|
74
|
+
/**
|
75
|
+
* 段落占位图宽度,若为数组格式对应每行宽度,否则表示最后一行的宽度
|
76
|
+
* @en The width of paragraph. If width is an Array, it corresponds to the width of each line, otherwise it indicates the width of the last line
|
77
|
+
* @default "60%"
|
78
|
+
*/
|
79
|
+
width?: number | string | Array<number | string>;
|
80
|
+
}
|
81
|
+
export interface SkeletonAvatarProps extends SimpleBaseProps {
|
82
|
+
}
|
83
|
+
export interface SkeletonGridProps extends SimpleBaseProps {
|
84
|
+
/**
|
85
|
+
* 金刚位列数
|
86
|
+
* @en columns of grid
|
87
|
+
* @default 4
|
88
|
+
*/
|
89
|
+
columns?: number;
|
90
|
+
}
|
91
|
+
export interface SkeletonNodeProps extends BaseProps {
|
92
|
+
}
|
93
|
+
export interface SkeletonRef {
|
94
|
+
/**
|
95
|
+
* 最外层 DOM 元素
|
96
|
+
* @en The outer DOM element of the component
|
97
|
+
*/
|
98
|
+
dom: HTMLDivElement | null;
|
99
|
+
}
|
100
|
+
export interface SkeletonContextParams {
|
101
|
+
backgroundColor?: string;
|
102
|
+
showAnimation: boolean;
|
103
|
+
animation: SkeletonProps['animation'];
|
104
|
+
}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
(function (global, factory) {
|
2
|
+
if (typeof define === "function" && define.amd) {
|
3
|
+
define(["exports"], factory);
|
4
|
+
} else if (typeof exports !== "undefined") {
|
5
|
+
factory(exports);
|
6
|
+
} else {
|
7
|
+
var mod = {
|
8
|
+
exports: {}
|
9
|
+
};
|
10
|
+
factory(mod.exports);
|
11
|
+
global.type = mod.exports;
|
12
|
+
}
|
13
|
+
})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
|
14
|
+
"use strict";
|
15
|
+
|
16
|
+
_exports.__esModule = true;
|
17
|
+
});
|
package/umd/style.d.ts
CHANGED
package/umd/style.js
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
(function (global, factory) {
|
2
2
|
if (typeof define === "function" && define.amd) {
|
3
|
-
define(["../style/public.less", "./tabs/style", "./sticky/style", "./load-more/style", "./cell/style", "./action-sheet/style", "./avatar/style", "./badge/style", "./button/style", "./carousel/style", "./checkbox/style", "./circle-progress/style", "./collapse/style", "./context-provider/style", "./count-down/style", "./date-picker/style", "./dialog/style", "./divider/style", "./dropdown/style", "./dropdown-menu/style", "./ellipsis/style", "./form/style", "./grid/style", "./image/style", "./image-picker/style", "./image-preview/style", "./index-bar/style", "./input/style", "./keyboard/style", "./loading/style", "./masking/style", "./nav-bar/style", "./notice-bar/style", "./notify/style", "./pagination/style", "./picker/style", "./picker-view/style", "./popover/style", "./popup/style", "./popup-swiper/style", "./portal/style", "./progress/style", "./pull-refresh/style", "./radio/style", "./rate/style", "./search-bar/style", "./show-monitor/style", "./slider/style", "./stepper/style", "./steps/style", "./swipe-action/style", "./swipe-load/style", "./switch/style", "./tab-bar/style", "./tag/style", "./textarea/style", "./toast/style", "./transition/style"], factory);
|
3
|
+
define(["../style/public.less", "./tabs/style", "./sticky/style", "./load-more/style", "./cell/style", "./action-sheet/style", "./avatar/style", "./badge/style", "./button/style", "./carousel/style", "./checkbox/style", "./circle-progress/style", "./collapse/style", "./context-provider/style", "./count-down/style", "./date-picker/style", "./dialog/style", "./divider/style", "./dropdown/style", "./dropdown-menu/style", "./ellipsis/style", "./form/style", "./grid/style", "./image/style", "./image-picker/style", "./image-preview/style", "./index-bar/style", "./input/style", "./keyboard/style", "./loading/style", "./masking/style", "./nav-bar/style", "./notice-bar/style", "./notify/style", "./pagination/style", "./picker/style", "./picker-view/style", "./popover/style", "./popup/style", "./popup-swiper/style", "./portal/style", "./progress/style", "./pull-refresh/style", "./radio/style", "./rate/style", "./search-bar/style", "./skeleton/style", "./show-monitor/style", "./slider/style", "./stepper/style", "./steps/style", "./swipe-action/style", "./swipe-load/style", "./switch/style", "./tab-bar/style", "./tag/style", "./textarea/style", "./toast/style", "./transition/style"], factory);
|
4
4
|
} else if (typeof exports !== "undefined") {
|
5
|
-
factory(require("../style/public.less"), require("./tabs/style"), require("./sticky/style"), require("./load-more/style"), require("./cell/style"), require("./action-sheet/style"), require("./avatar/style"), require("./badge/style"), require("./button/style"), require("./carousel/style"), require("./checkbox/style"), require("./circle-progress/style"), require("./collapse/style"), require("./context-provider/style"), require("./count-down/style"), require("./date-picker/style"), require("./dialog/style"), require("./divider/style"), require("./dropdown/style"), require("./dropdown-menu/style"), require("./ellipsis/style"), require("./form/style"), require("./grid/style"), require("./image/style"), require("./image-picker/style"), require("./image-preview/style"), require("./index-bar/style"), require("./input/style"), require("./keyboard/style"), require("./loading/style"), require("./masking/style"), require("./nav-bar/style"), require("./notice-bar/style"), require("./notify/style"), require("./pagination/style"), require("./picker/style"), require("./picker-view/style"), require("./popover/style"), require("./popup/style"), require("./popup-swiper/style"), require("./portal/style"), require("./progress/style"), require("./pull-refresh/style"), require("./radio/style"), require("./rate/style"), require("./search-bar/style"), require("./show-monitor/style"), require("./slider/style"), require("./stepper/style"), require("./steps/style"), require("./swipe-action/style"), require("./swipe-load/style"), require("./switch/style"), require("./tab-bar/style"), require("./tag/style"), require("./textarea/style"), require("./toast/style"), require("./transition/style"));
|
5
|
+
factory(require("../style/public.less"), require("./tabs/style"), require("./sticky/style"), require("./load-more/style"), require("./cell/style"), require("./action-sheet/style"), require("./avatar/style"), require("./badge/style"), require("./button/style"), require("./carousel/style"), require("./checkbox/style"), require("./circle-progress/style"), require("./collapse/style"), require("./context-provider/style"), require("./count-down/style"), require("./date-picker/style"), require("./dialog/style"), require("./divider/style"), require("./dropdown/style"), require("./dropdown-menu/style"), require("./ellipsis/style"), require("./form/style"), require("./grid/style"), require("./image/style"), require("./image-picker/style"), require("./image-preview/style"), require("./index-bar/style"), require("./input/style"), require("./keyboard/style"), require("./loading/style"), require("./masking/style"), require("./nav-bar/style"), require("./notice-bar/style"), require("./notify/style"), require("./pagination/style"), require("./picker/style"), require("./picker-view/style"), require("./popover/style"), require("./popup/style"), require("./popup-swiper/style"), require("./portal/style"), require("./progress/style"), require("./pull-refresh/style"), require("./radio/style"), require("./rate/style"), require("./search-bar/style"), require("./skeleton/style"), require("./show-monitor/style"), require("./slider/style"), require("./stepper/style"), require("./steps/style"), require("./swipe-action/style"), require("./swipe-load/style"), require("./switch/style"), require("./tab-bar/style"), require("./tag/style"), require("./textarea/style"), require("./toast/style"), require("./transition/style"));
|
6
6
|
} else {
|
7
7
|
var mod = {
|
8
8
|
exports: {}
|
9
9
|
};
|
10
|
-
factory(global._public, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style);
|
10
|
+
factory(global._public, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style);
|
11
11
|
global.style = mod.exports;
|
12
12
|
}
|
13
|
-
})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _style, _style2, _style3, _style4, _style5, _style6, _style7, _style8, _style9, _style10, _style11, _style12, _style13, _style14, _style15, _style16, _style17, _style18, _style19, _style20, _style21, _style22, _style23, _style24, _style25, _style26, _style27, _style28, _style29, _style30, _style31, _style32, _style33, _style34, _style35, _style36, _style37, _style38, _style39, _style40, _style41, _style42, _style43, _style44, _style45, _style46, _style47, _style48, _style49, _style50, _style51, _style52, _style53, _style54, _style55, _style56, _style57) {
|
13
|
+
})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _style, _style2, _style3, _style4, _style5, _style6, _style7, _style8, _style9, _style10, _style11, _style12, _style13, _style14, _style15, _style16, _style17, _style18, _style19, _style20, _style21, _style22, _style23, _style24, _style25, _style26, _style27, _style28, _style29, _style30, _style31, _style32, _style33, _style34, _style35, _style36, _style37, _style38, _style39, _style40, _style41, _style42, _style43, _style44, _style45, _style46, _style47, _style48, _style49, _style50, _style51, _style52, _style53, _style54, _style55, _style56, _style57, _style58) {
|
14
14
|
"use strict";
|
15
15
|
});
|
package/umd/tabs/index.js
CHANGED
@@ -427,9 +427,15 @@
|
|
427
427
|
}
|
428
428
|
|
429
429
|
function updateLayout() {
|
430
|
+
var _domRef$current, _domRef$current2;
|
431
|
+
|
432
|
+
var _getOffset = (0, _mobileUtils.getOffset)(domRef.current),
|
433
|
+
width = _getOffset.width,
|
434
|
+
height = _getOffset.height;
|
435
|
+
|
430
436
|
cellRef.current && cellRef.current.resetUnderlineStyle();
|
431
|
-
setWrapWidth(domRef.current ?
|
432
|
-
setWrapHeight(domRef.current ?
|
437
|
+
setWrapWidth(width || ((_domRef$current = domRef.current) == null ? void 0 : _domRef$current.offsetWidth) || 0);
|
438
|
+
setWrapHeight(height || ((_domRef$current2 = domRef.current) == null ? void 0 : _domRef$current2.offsetHeight) || 0);
|
433
439
|
paneRef.current && paneRef.current.setCurrentHeight();
|
434
440
|
}
|
435
441
|
|