/
+page.svelte.md
72 lines (66 loc) 路 2.15 KB
/
+page.svelte.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
---
title: Skeleton
desc: Skeleton is a component that can be used to show a loading state of a component.
published: true
layout: components
---
<script>
import Component from "$components/Component.svelte"
import ClassTable from "$components/ClassTable.svelte"
import ComponentPageTabs from "$components/ComponentPageTabs.svelte"
import BrowserSupport from "$components/BrowserSupport.svelte"
import { prefix } from '$lib/stores';
import { replace } from '$lib/actions';
</script>
<!-- <ComponentPageTabs/> -->
<ClassTable
data="{[
{ type: 'component', class: 'skeleton', desc: 'Shows a div with loading animation' },
]}"
/>
<Component title="Skeleton">
<div class="skeleton w-32 h-32"></div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="skeleton w-32 h-32"></div>`
}</pre>
</Component>
<Component title="Skeleton - circle with content">
<div class="flex flex-col gap-4 w-52">
<div class="flex gap-4 items-center">
<div class="skeleton w-16 h-16 rounded-full shrink-0"></div>
<div class="flex flex-col gap-4">
<div class="skeleton h-4 w-20"></div>
<div class="skeleton h-4 w-28"></div>
</div>
</div>
<div class="skeleton h-32 w-full"></div>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="flex flex-col gap-4 w-52">
<div class="flex gap-4 items-center">
<div class="$$skeleton w-16 h-16 rounded-full shrink-0"></div>
<div class="flex flex-col gap-4">
<div class="$$skeleton h-4 w-20"></div>
<div class="$$skeleton h-4 w-28"></div>
</div>
</div>
<div class="$$skeleton h-32 w-full"></div>
</div>`
}</pre>
</Component>
<Component title="Skeleton - rectangle with content">
<div class="flex flex-col gap-4 w-52">
<div class="skeleton h-32 w-full"></div>
<div class="skeleton h-4 w-28"></div>
<div class="skeleton h-4 w-full"></div>
<div class="skeleton h-4 w-full"></div>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="flex flex-col gap-4 w-52">
<div class="$$skeleton h-32 w-full"></div>
<div class="$$skeleton h-4 w-28"></div>
<div class="$$skeleton h-4 w-full"></div>
<div class="$$skeleton h-4 w-full"></div>
</div>`
}</pre>
</Component>