Skip to content

Commit 44cdecb

Browse files
rstoenescurstoenescu
committed
feat(docs): Documentation for QSkeleton
1 parent b9b2df7 commit 44cdecb

File tree

24 files changed

+358
-24
lines changed

24 files changed

+358
-24
lines changed

‎docs/src/assets/menu.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -929,6 +929,11 @@ const components = [
929929
name: 'Separator',
930930
path: 'separator'
931931
},
932+
{
933+
name: 'Skeleton',
934+
badge: 'new',
935+
path: 'skeleton'
936+
},
932937
{
933938
name: 'Slide Item',
934939
path: 'slide-item'
@@ -993,7 +998,6 @@ const components = [
993998
},
994999
{
9951000
name: 'Virtual Scroll',
996-
badge: 'new',
9971001
path: 'virtual-scroll'
9981002
}
9991003
]

‎docs/src/examples/QSkeleton/Animations.vue‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="q-gutter-md row items-start">
4+
<q-card flat bordered v-for="animation in skeletonAnimations" :key="animation" style="width: 250px">
5+
<q-card-section>
6+
<div class="text-caption">"{{ animation }}"</div>
7+
</q-card-section>
8+
9+
<q-separator />
10+
11+
<q-card-section>
12+
<q-skeleton :animation="animation" />
13+
</q-card-section>
14+
</q-card>
15+
</div>
16+
</div>
17+
</template>
18+
19+
<script>
20+
export default {
21+
data () {
22+
return {
23+
skeletonAnimations: [
24+
'wave', 'pulse', 'pulse-x', 'pulse-y', 'fade', 'blink', 'none'
25+
]
26+
}
27+
}
28+
}
29+
</script>

‎docs/src/examples/QSkeleton/Card.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<q-card style="max-width: 300px">
4+
<q-item>
5+
<q-item-section avatar>
6+
<q-skeleton type="QAvatar" />
7+
</q-item-section>
8+
9+
<q-item-section>
10+
<q-item-label>
11+
<q-skeleton type="text" />
12+
</q-item-label>
13+
<q-item-label caption>
14+
<q-skeleton type="text" />
15+
</q-item-label>
16+
</q-item-section>
17+
</q-item>
18+
19+
<q-skeleton height="200px" square />
20+
21+
<q-card-actions align="right" class="q-gutter-md">
22+
<q-skeleton type="QBtn" />
23+
<q-skeleton type="QBtn" />
24+
</q-card-actions>
25+
</q-card>
26+
</div>
27+
</template>

‎docs/src/examples/QSkeleton/RecipeFacebook.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<q-card flat bordered style="max-width: 300px">
4+
<q-item>
5+
<q-item-section avatar>
6+
<q-skeleton type="QAvatar" animation="fade" />
7+
</q-item-section>
8+
9+
<q-item-section>
10+
<q-item-label>
11+
<q-skeleton type="text" animation="fade" />
12+
</q-item-label>
13+
<q-item-label caption>
14+
<q-skeleton type="text" animation="fade" />
15+
</q-item-label>
16+
</q-item-section>
17+
</q-item>
18+
19+
<q-skeleton height="200px" square animation="fade" />
20+
21+
<q-card-section>
22+
<q-skeleton type="text" class="text-subtitle2" animation="fade" />
23+
<q-skeleton type="text" width="50%" class="text-subtitle2" animation="fade" />
24+
</q-card-section>
25+
</q-card>
26+
</div>
27+
</template>

‎docs/src/examples/QSkeleton/RecipeList.vue‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<q-item style="max-width: 300px">
4+
<q-item-section avatar>
5+
<q-skeleton type="QAvatar" />
6+
</q-item-section>
7+
8+
<q-item-section>
9+
<q-item-label>
10+
<q-skeleton type="text" />
11+
</q-item-label>
12+
<q-item-label caption>
13+
<q-skeleton type="text" width="65%" />
14+
</q-item-label>
15+
</q-item-section>
16+
</q-item>
17+
18+
<q-item style="max-width: 300px">
19+
<q-item-section avatar>
20+
<q-skeleton type="QAvatar" />
21+
</q-item-section>
22+
23+
<q-item-section>
24+
<q-item-label>
25+
<q-skeleton type="text" />
26+
</q-item-label>
27+
<q-item-label caption>
28+
<q-skeleton type="text" width="90%" />
29+
</q-item-label>
30+
</q-item-section>
31+
</q-item>
32+
33+
<q-item style="max-width: 300px">
34+
<q-item-section avatar>
35+
<q-skeleton type="QAvatar" />
36+
</q-item-section>
37+
38+
<q-item-section>
39+
<q-item-label>
40+
<q-skeleton type="text" width="35%" />
41+
</q-item-label>
42+
<q-item-label caption>
43+
<q-skeleton type="text" />
44+
</q-item-label>
45+
</q-item-section>
46+
</q-item>
47+
</div>
48+
</template>

‎docs/src/examples/QSkeleton/RecipeTable.vue‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<q-markup-table>
4+
<thead>
5+
<tr>
6+
<th class="text-left" style="width: 150px">
7+
<q-skeleton animation="blink" type="text" />
8+
</th>
9+
<th class="text-right">
10+
<q-skeleton animation="blink" type="text" />
11+
</th>
12+
<th class="text-right">
13+
<q-skeleton animation="blink" type="text" />
14+
</th>
15+
<th class="text-right">
16+
<q-skeleton animation="blink" type="text" />
17+
</th>
18+
<th class="text-right">
19+
<q-skeleton animation="blink" type="text" />
20+
</th>
21+
<th class="text-right">
22+
<q-skeleton animation="blink" type="text" />
23+
</th>
24+
</tr>
25+
</thead>
26+
27+
<tbody>
28+
<tr v-for="n in 5" :key="n">
29+
<td class="text-left">
30+
<q-skeleton animation="blink" type="text" width="85px" />
31+
</td>
32+
<td class="text-right">
33+
<q-skeleton animation="blink" type="text" width="50px" />
34+
</td>
35+
<td class="text-right">
36+
<q-skeleton animation="blink" type="text" width="35px" />
37+
</td>
38+
<td class="text-right">
39+
<q-skeleton animation="blink" type="text" width="65px" />
40+
</td>
41+
<td class="text-right">
42+
<q-skeleton animation="blink" type="text" width="25px" />
43+
</td>
44+
<td class="text-right">
45+
<q-skeleton animation="blink" type="text" width="85px" />
46+
</td>
47+
</tr>
48+
</tbody>
49+
</q-markup-table>
50+
</div>
51+
</template>

‎docs/src/examples/QSkeleton/RecipeYoutube.vue‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<q-card flat style="max-width: 300px">
4+
<q-skeleton height="150px" square />
5+
6+
<q-card-section>
7+
<q-skeleton type="text" class="text-subtitle1" />
8+
<q-skeleton type="text" width="50%" class="text-subtitle1" />
9+
<q-skeleton type="text" class="text-caption" />
10+
</q-card-section>
11+
</q-card>
12+
</div>
13+
</template>

‎docs/src/examples/QSkeleton/Sizing.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="q-gutter-md">
4+
<q-skeleton type="circle" size="100px" />
5+
<q-skeleton width="150px" />
6+
<q-skeleton height="150px" />
7+
<q-skeleton size="50px" />
8+
<q-skeleton width="200px" height="100px" />
9+
</div>
10+
</div>
11+
</template>

‎docs/src/examples/QSkeleton/StylingBordered.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="q-gutter-y-md">
4+
<q-skeleton bordered type="circle" />
5+
<q-skeleton bordered />
6+
<q-skeleton bordered square />
7+
</div>
8+
</div>
9+
</template>

‎docs/src/examples/QSkeleton/StylingColor.vue‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="q-gutter-md">
4+
<q-skeleton class="bg-accent" type="circle" />
5+
<q-skeleton class="bg-teal" />
6+
<q-skeleton class="bg-orange" animation="pulse-y" />
7+
<q-skeleton class="bg-indigo" />
8+
</div>
9+
</div>
10+
</template>

0 commit comments

Comments
 (0)