wedux-ui 0.2.7 → 0.3.1
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/README.md +6 -2
- package/miniprogram_dist/components/empty/empty.js +37 -0
- package/miniprogram_dist/components/empty/empty.json +4 -0
- package/miniprogram_dist/components/empty/empty.scss +59 -0
- package/miniprogram_dist/components/empty/empty.wxml +13 -0
- package/miniprogram_dist/styles/iconfont.scss +28 -25
- package/miniprogram_dist/styles/index.scss +2 -0
- package/miniprogram_dist/styles/tokens.scss +6 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -22,10 +22,14 @@ npm install wedux-ui
|
|
|
22
22
|
|
|
23
23
|
在项目全局样式文件 `app.scss` 中引入：
|
|
24
24
|
|
|
25
|
+
```scss
|
|
26
|
+
@import './miniprogram_npm/wedux-ui/styles/index.scss';
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
如需在页面中直接使用图标字体（`iconfont` 类名），额外引入：
|
|
30
|
+
|
|
25
31
|
```scss
|
|
26
32
|
@import './miniprogram_npm/wedux-ui/styles/iconfont.scss';
|
|
27
|
-
@import './miniprogram_npm/wedux-ui/styles/tokens.scss';
|
|
28
|
-
@import './miniprogram_npm/wedux-ui/styles/theme.scss';
|
|
29
33
|
```
|
|
30
34
|
|
|
31
35
|
## 快速上手
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
const SIZE_VAR_MAP = {
|
|
2
|
+
small: 'var(--w-empty-image-size-sm)',
|
|
3
|
+
medium: 'var(--w-empty-image-size-md)',
|
|
4
|
+
large: 'var(--w-empty-image-size-lg)',
|
|
5
|
+
};
|
|
6
|
+
|
|
7
|
+
Component({
|
|
8
|
+
options: {
|
|
9
|
+
multipleSlots: true,
|
|
10
|
+
},
|
|
11
|
+
|
|
12
|
+
properties: {
|
|
13
|
+
title: {
|
|
14
|
+
type: String,
|
|
15
|
+
value: '暂无数据',
|
|
16
|
+
},
|
|
17
|
+
description: {
|
|
18
|
+
type: String,
|
|
19
|
+
value: '',
|
|
20
|
+
},
|
|
21
|
+
size: {
|
|
22
|
+
type: String,
|
|
23
|
+
value: 'medium', // small | medium | large
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
|
|
27
|
+
data: {
|
|
28
|
+
_imageStyle: '--w-empty-image-size: var(--w-empty-image-size-md)',
|
|
29
|
+
},
|
|
30
|
+
|
|
31
|
+
observers: {
|
|
32
|
+
size: function (size) {
|
|
33
|
+
const varVal = SIZE_VAR_MAP[size] || SIZE_VAR_MAP.medium;
|
|
34
|
+
this.setData({ _imageStyle: `--w-empty-image-size: ${varVal}` });
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
});
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
@import '../../styles/iconfont.scss';
|
|
2
|
+
|
|
3
|
+
.w-empty {
|
|
4
|
+
display: flex;
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
align-items: center;
|
|
7
|
+
justify-content: center;
|
|
8
|
+
padding: var(--spacing-xl) var(--spacing-lg);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.w-empty__image {
|
|
12
|
+
position: relative;
|
|
13
|
+
width: var(--w-empty-image-size, var(--w-empty-image-size-md));
|
|
14
|
+
height: var(--w-empty-image-size, var(--w-empty-image-size-md));
|
|
15
|
+
margin-bottom: var(--spacing-md);
|
|
16
|
+
color: var(--color-text-placeholder);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.w-empty__image-default {
|
|
20
|
+
display: flex;
|
|
21
|
+
align-items: center;
|
|
22
|
+
justify-content: center;
|
|
23
|
+
width: 100%;
|
|
24
|
+
height: 100%;
|
|
25
|
+
font-size: var(--w-empty-image-size, var(--w-empty-image-size-md));
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.w-empty__image-slot {
|
|
29
|
+
position: absolute;
|
|
30
|
+
top: 0;
|
|
31
|
+
left: 0;
|
|
32
|
+
width: 100%;
|
|
33
|
+
height: 100%;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.w-empty__image-slot:empty {
|
|
37
|
+
display: none;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.w-empty__title {
|
|
41
|
+
font-size: var(--font-size-md);
|
|
42
|
+
color: var(--color-text-secondary);
|
|
43
|
+
text-align: center;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.w-empty__description {
|
|
47
|
+
margin-top: var(--spacing-xs);
|
|
48
|
+
font-size: var(--font-size-sm);
|
|
49
|
+
color: var(--color-text-placeholder);
|
|
50
|
+
text-align: center;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.w-empty__extra {
|
|
54
|
+
margin-top: var(--spacing-md);
|
|
55
|
+
|
|
56
|
+
&:empty {
|
|
57
|
+
display: none;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<view class="w-empty w-empty--{{size}}">
|
|
2
|
+
<view class="w-empty__image" style="{{_imageStyle}}">
|
|
3
|
+
<view class="w-empty__image-default iconfont icon-empty"></view>
|
|
4
|
+
<view class="w-empty__image-slot">
|
|
5
|
+
<slot name="image"></slot>
|
|
6
|
+
</view>
|
|
7
|
+
</view>
|
|
8
|
+
<view class="w-empty__title"><text>{{title}}</text></view>
|
|
9
|
+
<view wx:if="{{description}}" class="w-empty__description"><text>{{description}}</text></view>
|
|
10
|
+
<view class="w-empty__extra">
|
|
11
|
+
<slot name="extra"></slot>
|
|
12
|
+
</view>
|
|
13
|
+
</view>
|
|
@@ -1,91 +1,94 @@
|
|
|
1
1
|
@font-face {
|
|
2
|
-
font-family:
|
|
3
|
-
src:
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
url('//at.alicdn.com/t/c/font_5134551_s7stueux7tn.ttf?t=1774767237748') format('truetype');
|
|
2
|
+
font-family: "iconfont"; /* Project id 5134551 */
|
|
3
|
+
src:
|
|
4
|
+
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
|
|
5
|
+
url('//at.alicdn.com/t/c/font_5134551_zr54w3qnk2m.ttf?t=1775402273099') format('truetype');
|
|
7
6
|
}
|
|
8
7
|
|
|
9
8
|
.iconfont {
|
|
10
|
-
font-family:
|
|
9
|
+
font-family: "iconfont" !important;
|
|
11
10
|
font-size: 16px;
|
|
12
11
|
font-style: normal;
|
|
13
12
|
-webkit-font-smoothing: antialiased;
|
|
14
13
|
-moz-osx-font-smoothing: grayscale;
|
|
15
14
|
}
|
|
16
15
|
|
|
16
|
+
.icon-empty:before {
|
|
17
|
+
content: "\e6a6";
|
|
18
|
+
}
|
|
19
|
+
|
|
17
20
|
.icon-minus:before {
|
|
18
|
-
content:
|
|
21
|
+
content: "\e7fd";
|
|
19
22
|
}
|
|
20
23
|
|
|
21
24
|
.icon-plus:before {
|
|
22
|
-
content:
|
|
25
|
+
content: "\e8fe";
|
|
23
26
|
}
|
|
24
27
|
|
|
25
28
|
.icon-home:before {
|
|
26
|
-
content:
|
|
29
|
+
content: "\e6d7";
|
|
27
30
|
}
|
|
28
31
|
|
|
29
32
|
.icon-computer-border:before {
|
|
30
|
-
content:
|
|
33
|
+
content: "\e622";
|
|
31
34
|
}
|
|
32
35
|
|
|
33
36
|
.icon-g_my:before {
|
|
34
|
-
content:
|
|
37
|
+
content: "\e61a";
|
|
35
38
|
}
|
|
36
39
|
|
|
37
40
|
.icon-diandan01:before {
|
|
38
|
-
content:
|
|
41
|
+
content: "\e606";
|
|
39
42
|
}
|
|
40
43
|
|
|
41
44
|
.icon-close:before {
|
|
42
|
-
content:
|
|
45
|
+
content: "\e60f";
|
|
43
46
|
}
|
|
44
47
|
|
|
45
48
|
.icon-play_fill:before {
|
|
46
|
-
content:
|
|
49
|
+
content: "\e717";
|
|
47
50
|
}
|
|
48
51
|
|
|
49
52
|
.icon-calendar:before {
|
|
50
|
-
content:
|
|
53
|
+
content: "\e699";
|
|
51
54
|
}
|
|
52
55
|
|
|
53
56
|
.icon-retry:before {
|
|
54
|
-
content:
|
|
57
|
+
content: "\e601";
|
|
55
58
|
}
|
|
56
59
|
|
|
57
60
|
.icon-left:before {
|
|
58
|
-
content:
|
|
61
|
+
content: "\e83d";
|
|
59
62
|
}
|
|
60
63
|
|
|
61
64
|
.icon-file:before {
|
|
62
|
-
content:
|
|
65
|
+
content: "\e803";
|
|
63
66
|
}
|
|
64
67
|
|
|
65
68
|
.icon-top:before {
|
|
66
|
-
content:
|
|
69
|
+
content: "\e681";
|
|
67
70
|
}
|
|
68
71
|
|
|
69
72
|
.icon-clock1:before {
|
|
70
|
-
content:
|
|
73
|
+
content: "\e66a";
|
|
71
74
|
}
|
|
72
75
|
|
|
73
76
|
.icon-sort:before {
|
|
74
|
-
content:
|
|
77
|
+
content: "\e83c";
|
|
75
78
|
}
|
|
76
79
|
|
|
77
80
|
.icon-add:before {
|
|
78
|
-
content:
|
|
81
|
+
content: "\e835";
|
|
79
82
|
}
|
|
80
83
|
|
|
81
84
|
.icon-up:before {
|
|
82
|
-
content:
|
|
85
|
+
content: "\e845";
|
|
83
86
|
}
|
|
84
87
|
|
|
85
88
|
.icon-right:before {
|
|
86
|
-
content:
|
|
89
|
+
content: "\e840";
|
|
87
90
|
}
|
|
88
91
|
|
|
89
92
|
.icon-down:before {
|
|
90
|
-
content:
|
|
93
|
+
content: "\e839";
|
|
91
94
|
}
|
|
@@ -294,4 +294,10 @@ page {
|
|
|
294
294
|
--w-marquee-gap: 32rpx;
|
|
295
295
|
--w-marquee-font-size: var(--font-size-md);
|
|
296
296
|
--w-marquee-color: var(--color-text-primary);
|
|
297
|
+
|
|
298
|
+
/* Empty */
|
|
299
|
+
--w-empty-image-size-sm: 80rpx;
|
|
300
|
+
--w-empty-image-size-md: 160rpx;
|
|
301
|
+
--w-empty-image-size-lg: 240rpx;
|
|
302
|
+
--w-empty-image-size: var(--w-empty-image-size-md);
|
|
297
303
|
}
|