-
-
Notifications
You must be signed in to change notification settings - Fork 305
/
+page.svelte
139 lines (135 loc) · 4.67 KB
/
+page.svelte
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<script lang="ts">
import DocsShell from '$lib/layouts/DocsShell/DocsShell.svelte';
import { DocsFeature, type DocsShellSettings } from '$lib/layouts/DocsShell/types';
import DocsPreview from '$lib/components/DocsPreview/DocsPreview.svelte';
// Components
import { CodeBlock, SlideToggle } from '@skeletonlabs/skeleton';
// Docs Shell
const settings: DocsShellSettings = {
feature: DocsFeature.Element,
name: 'Placeholders',
description: 'Provides "skeleton" placeholders that can display while content loads.',
stylesheetIncludes: ['all', 'elements'],
stylesheets: ['elements/placeholders'],
source: 'packages/plugin/src/styles/components/placeholders.css',
classes: [
['<code class="code">placeholder</code>', '-', 'Applies the default placeholder style.'],
['<code class="code">placeholder-circle</code>', '-', 'Applies the circular placeholder style.']
]
};
// Local
let animate = true;
</script>
<DocsShell {settings}>
<!-- Slot: Sandbox -->
<svelte:fragment slot="sandbox">
<DocsPreview>
<svelte:fragment slot="preview">
<section class="card w-full">
<div class="card-header flex justify-between items-center">
<div class="flex justify-center items-center space-x-4" class:animate-pulse={animate}>
<div class="placeholder-circle w-16"></div>
<div class="placeholder-circle w-14"></div>
<div class="placeholder-circle w-10"></div>
</div>
</div>
<div class="p-4 space-y-4" class:animate-pulse={animate}>
<div class="placeholder"></div>
<div class="grid grid-cols-4 gap-4">
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
</section>
</svelte:fragment>
<svelte:fragment slot="footer">
<div class="text-center">
<SlideToggle bind:checked={animate} name="animated" accent="bg-secondary-500">Animated</SlideToggle>
</div>
</svelte:fragment>
<svelte:fragment slot="source">
<CodeBlock language="html" code={`<div class="placeholder" />`} />
</svelte:fragment>
</DocsPreview>
</svelte:fragment>
<!-- Slot: Usage -->
<svelte:fragment slot="usage">
<p>
Apply the <code class="code">.placeholder</code> class to any <em>div</em> element.
</p>
<!-- Layout -->
<div class="space-y-4">
<h2 class="h2">Layout</h2>
<!-- prettier-ignore -->
<p>
Use the <a class="anchor" href="https://tailwindcss.com/docs/grid-template-columns" target="_blank" rel="noreferrer">Tailwind column and gap classes</a> to adjust column amount and gap spacing.
</p>
<DocsPreview background="neutral">
<svelte:fragment slot="preview">
<section class="card w-full">
<div class="p-4 space-y-4" class:animate-pulse={animate}>
<div class="placeholder"></div>
<div class="grid grid-cols-3 gap-8">
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
<div class="grid grid-cols-4 gap-4">
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
</div>
</section>
</svelte:fragment>
<svelte:fragment slot="source">
<CodeBlock
language="html"
code={`
<section class="card w-full">
<div class="p-4 space-y-4">
<div class="placeholder" />
<div class="grid grid-cols-3 gap-8">
<div class="placeholder" />
<div class="placeholder" />
<div class="placeholder" />
</div>
<div class="grid grid-cols-4 gap-4">
<div class="placeholder" />
<div class="placeholder" />
<div class="placeholder" />
<div class="placeholder" />
</div>
</div>
</section>
`}
/>
</svelte:fragment>
</DocsPreview>
</div>
<!-- Circular -->
<div class="space-y-4">
<h2 class="h2">Circular</h2>
<p>Apply the <code class="code">.placeholder-circle</code> class and set a width to define the diameter.</p>
<DocsPreview background="neutral">
<svelte:fragment slot="preview">
<div class="placeholder-circle w-16" class:animate-pulse={animate}></div>
</svelte:fragment>
<svelte:fragment slot="source">
<CodeBlock language="html" code={`<div class="placeholder-circle w-16" />`} />
</svelte:fragment>
</DocsPreview>
</div>
<!-- Animated -->
<div class="space-y-4">
<h2 class="h2">Animated</h2>
<p>Apply the <code class="code">.animate-pulse</code> utility class provided by Tailwind.</p>
<CodeBlock language="html" code={`<div class="placeholder animate-pulse" />`} />
</div>
</svelte:fragment>
</DocsShell>