Skip to content

Commit 099e4b2

Browse files
chenxi-20chenxi-20
authored
feat: [skeleton] Add Skeleton mobile first (#3222)
* feat: [skeleton] 增加骨架屏多端组件 * feat: [skeleton] 根据设计师意见优化
1 parent cbfcde5 commit 099e4b2

File tree

27 files changed

+675
-27
lines changed

27 files changed

+675
-27
lines changed

‎examples/sites/demos/apis/skeleton.js

Lines changed: 40 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export default {
2-
mode: ['pc'],
2+
mode: ['pc', 'mobile-first'],
33
apis: [
44
{
55
name: 'skeleton',
@@ -14,8 +14,9 @@ export default {
1414
'en-US':
1515
'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.'
1616
},
17-
mode: ['pc'],
18-
pcDemo: 'animation'
17+
mode: ['pc', 'mobile-first'],
18+
pcDemo: 'animation',
19+
mfDemo: 'animation'
1920
},
2021
{
2122
name: 'avatar',
@@ -26,8 +27,9 @@ export default {
2627
'en-US':
2728
'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.'
2829
},
29-
mode: ['pc'],
30-
pcDemo: 'complex-demo'
30+
mode: ['pc', 'mobile-first'],
31+
pcDemo: 'complex-demo',
32+
mfDemo: 'avatar'
3133
},
3234
{
3335
name: 'loading',
@@ -38,8 +40,9 @@ export default {
3840
'en-US':
3941
'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.'
4042
},
41-
mode: ['pc'],
42-
pcDemo: 'loading-completed'
43+
mode: ['pc', 'mobile-first'],
44+
pcDemo: 'loading-completed',
45+
mfDemo: 'loaded'
4346
},
4447
{
4548
name: 'rows',
@@ -49,8 +52,9 @@ export default {
4952
'zh-CN': '默认样式，可配置段落显示行数',
5053
'en-US': 'Default style. The number of lines displayed in a paragraph can be configured'
5154
},
52-
mode: ['pc'],
53-
pcDemo: 'custom-rows'
55+
mode: ['pc', 'mobile-first'],
56+
pcDemo: 'custom-rows',
57+
mfDemo: 'custom-rows'
5458
},
5559
{
5660
name: 'rows-width',
@@ -62,8 +66,9 @@ export default {
6266
'en-US':
6367
'Width of each line in a custom paragraph. Each item in the array can be a number or a string. If the value is a number, the component automatically increases the value by px'
6468
},
65-
mode: ['pc'],
66-
pcDemo: 'custom-paragraph-width'
69+
mode: ['pc', 'mobile-first'],
70+
pcDemo: 'custom-paragraph-width',
71+
mfDemo: 'rows-width'
6772
}
6873
],
6974
events: [],
@@ -76,8 +81,9 @@ export default {
7681
'zh-CN': '加载完成后显示的内容',
7782
'en-US': 'Content displayed after the loading is complete'
7883
},
79-
mode: ['pc'],
80-
pcDemo: 'loading-completed'
84+
mode: ['pc', 'mobile-first'],
85+
pcDemo: 'loading-completed',
86+
mfDemo: 'loaded'
8187
},
8288
{
8389
name: 'placeholder',
@@ -86,8 +92,9 @@ export default {
8692
'zh-CN': '自定义骨架屏结构',
8793
'en-US': 'Custom Skeleton Screen Structure'
8894
},
89-
mode: ['pc'],
90-
pcDemo: 'custom-layout'
95+
mode: ['pc', 'mobile-first'],
96+
pcDemo: 'custom-layout',
97+
mfDemo: 'custom-layout'
9198
}
9299
]
93100
},
@@ -105,8 +112,9 @@ export default {
105112
'en-US':
106113
'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.'
107114
},
108-
mode: ['pc'],
109-
pcDemo: 'size'
115+
mode: ['pc', 'mobile-first'],
116+
pcDemo: 'size',
117+
mfDemo: 'size'
110118
},
111119
{
112120
name: 'variant',
@@ -118,13 +126,25 @@ export default {
118126
'en-US':
119127
'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.'
120128
},
121-
mode: ['pc'],
122-
pcDemo: 'fine-grained-mode'
129+
mode: ['pc', 'mobile-first'],
130+
pcDemo: 'fine-grained-mode',
131+
mfDemo: 'shape'
123132
}
124133
],
125134
events: [],
126135
methods: [],
127-
slots: []
136+
slots: [
137+
{
138+
name: 'default',
139+
defaultValue: '',
140+
desc: {
141+
'zh-CN': '自定义图像',
142+
'en-US': 'Custom image'
143+
},
144+
mode: ['mobile-first'],
145+
mfDemo: 'image-item-slot'
146+
}
147+
]
128148
}
129149
],
130150
types: [

‎examples/sites/demos/mobile-first/app/skeleton/animation.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<div>
3+
<tiny-button @click="handler">{{ animated ? '关闭' : '开启' }}</tiny-button>
4+
<br /><br />
5+
<tiny-skeleton :animated="animated">
6+
<template #placeholder>
7+
<tiny-skeleton-item></tiny-skeleton-item>
8+
<br />
9+
<br />
10+
<tiny-skeleton-item variant="image"></tiny-skeleton-item>
11+
</template>
12+
</tiny-skeleton>
13+
</div>
14+
</template>
15+
16+
<script>
17+
import { TinySkeleton, TinySkeletonItem, TinyButton } from '@opentiny/vue'
18+
19+
export default {
20+
components: {
21+
TinySkeleton,
22+
TinySkeletonItem,
23+
TinyButton
24+
},
25+
data() {
26+
return {
27+
animated: false
28+
}
29+
},
30+
methods: {
31+
handler() {
32+
this.animated = !this.animated
33+
}
34+
}
35+
}
36+
</script>

‎examples/sites/demos/mobile-first/app/skeleton/avatar.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<div>
3+
<tiny-skeleton avatar :animated="false"></tiny-skeleton>
4+
</div>
5+
</template>
6+
7+
<script>
8+
import { TinySkeleton } from '@opentiny/vue'
9+
10+
export default {
11+
components: {
12+
TinySkeleton
13+
}
14+
}
15+
</script>

‎examples/sites/demos/mobile-first/app/skeleton/base.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<div>
3+
<tiny-skeleton :animated="false"></tiny-skeleton>
4+
</div>
5+
</template>
6+
7+
<script>
8+
import { TinySkeleton } from '@opentiny/vue'
9+
10+
export default {
11+
components: {
12+
TinySkeleton
13+
}
14+
}
15+
</script>

‎examples/sites/demos/mobile-first/app/skeleton/custom-layout.vue

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<div>
3+
<tiny-skeleton :animated="false">
4+
<template #placeholder>
5+
<h6>方形按钮</h6>
6+
<tiny-skeleton-item style="width: 64px; height: 24px"></tiny-skeleton-item>
7+
<tiny-skeleton-item style="width: 72px; height: 28px"></tiny-skeleton-item>
8+
<tiny-skeleton-item style="width: 88px; height: 32px"></tiny-skeleton-item>
9+
<h6>圆形按钮</h6>
10+
<tiny-skeleton-item style="width: 64px; height: 24px; border-radius: 2.5rem"></tiny-skeleton-item>
11+
<tiny-skeleton-item style="width: 72px; height: 28px; border-radius: 2.5rem"></tiny-skeleton-item>
12+
<tiny-skeleton-item style="width: 88px; height: 32px; border-radius: 2.5rem"></tiny-skeleton-item>
13+
<h6>输入框</h6>
14+
<tiny-skeleton-item style="width: 274px; height: 24px"></tiny-skeleton-item>
15+
<tiny-skeleton-item style="width: 274px; height: 28px"></tiny-skeleton-item>
16+
<tiny-skeleton-item style="width: 274px; height: 32px"></tiny-skeleton-item>
17+
<tiny-skeleton-item style="width: 274px; height: 72px"></tiny-skeleton-item>
18+
<h6>图片</h6>
19+
<tiny-skeleton-item variant="image" style="width: 100px; height: 100px"></tiny-skeleton-item>
20+
<h6>图表</h6>
21+
<tiny-skeleton-item variant="image" style="width: 100px; height: 100px">
22+
<icon-statistics style="width: 56px; height: 56px"></icon-statistics>
23+
</tiny-skeleton-item>
24+
</template>
25+
</tiny-skeleton>
26+
</div>
27+
</template>
28+
29+
<script>
30+
import { TinySkeleton, TinySkeletonItem } from '@opentiny/vue'
31+
import { iconStatistics } from '@opentiny/vue-icon'
32+
33+
export default {
34+
components: {
35+
TinySkeleton,
36+
TinySkeletonItem,
37+
IconStatistics: iconStatistics()
38+
}
39+
}
40+
</script>

‎examples/sites/demos/mobile-first/app/skeleton/custom-rows.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<div>
3+
<tiny-skeleton :rows="0" :animated="false"></tiny-skeleton>
4+
</div>
5+
</template>
6+
7+
<script>
8+
import { TinySkeleton } from '@opentiny/vue'
9+
10+
export default {
11+
components: {
12+
TinySkeleton
13+
}
14+
}
15+
</script>

‎examples/sites/demos/mobile-first/app/skeleton/image-item-slot.vue

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div>
3+
<tiny-skeleton :animated="false">
4+
<template #placeholder>
5+
<tiny-skeleton-item variant="image" style="width: 1036px; height: 352px">
6+
<icon-statistics style="width: 112px; height: 112px"></icon-statistics>
7+
</tiny-skeleton-item>
8+
</template>
9+
</tiny-skeleton>
10+
</div>
11+
</template>
12+
13+
<script>
14+
import { TinySkeleton, TinySkeletonItem } from '@opentiny/vue'
15+
import { iconStatistics } from '@opentiny/vue-icon'
16+
17+
export default {
18+
components: {
19+
TinySkeleton,
20+
TinySkeletonItem,
21+
IconStatistics: iconStatistics()
22+
}
23+
}
24+
</script>

‎examples/sites/demos/mobile-first/app/skeleton/loaded.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<div>
3+
<tiny-button @click="handler">{{ loading ? '显示' : '隐藏' }}</tiny-button>
4+
<br /><br />
5+
<tiny-skeleton :loading="loading" :animated="false">
6+
<template #default>
7+
<p class="paragraph">内容比较短的一段文字</p>
8+
</template>
9+
<template #placeholder>
10+
<tiny-skeleton-item></tiny-skeleton-item>
11+
</template>
12+
</tiny-skeleton>
13+
</div>
14+
</template>
15+
16+
<script>
17+
import { TinySkeleton, TinyButton, TinySkeletonItem } from '@opentiny/vue'
18+
19+
export default {
20+
components: {
21+
TinySkeleton,
22+
TinyButton,
23+
TinySkeletonItem
24+
},
25+
data() {
26+
return {
27+
loading: true
28+
}
29+
},
30+
methods: {
31+
handler() {
32+
this.loading = !this.loading
33+
}
34+
}
35+
}
36+
</script>

‎examples/sites/demos/mobile-first/app/skeleton/rows-width.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<div>
3+
<tiny-skeleton :rows-width="['200px', '100px', '50px']" :animated="false"></tiny-skeleton>
4+
</div>
5+
</template>
6+
7+
<script>
8+
import { TinySkeleton } from '@opentiny/vue'
9+
10+
export default {
11+
components: {
12+
TinySkeleton
13+
}
14+
}
15+
</script>

‎examples/sites/demos/mobile-first/app/skeleton/shape.vue

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div>
3+
<tiny-skeleton :animated="false">
4+
<template #placeholder>
5+
<tiny-skeleton-item variant="square"></tiny-skeleton-item>
6+
<br />
7+
<tiny-skeleton-item variant="image"></tiny-skeleton-item>
8+
<br /><br />
9+
<tiny-skeleton-item variant="circle"></tiny-skeleton-item>
10+
</template>
11+
</tiny-skeleton>
12+
</div>
13+
</template>
14+
15+
<script>
16+
import { TinySkeleton, TinySkeletonItem } from '@opentiny/vue'
17+
18+
export default {
19+
components: {
20+
TinySkeleton,
21+
TinySkeletonItem
22+
}
23+
}
24+
</script>

0 commit comments

Comments
 (0)