-
-
Notifications
You must be signed in to change notification settings - Fork 309
/
+page.svelte
206 lines (202 loc) · 7.28 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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<script lang="ts">
// Docs
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';
import { variants } from '$lib/components/DocsPreview/options';
// Components
import { CodeBlock } from '@skeletonlabs/skeleton';
// Docs Shell
const settings: DocsShellSettings = {
feature: DocsFeature.Element,
name: 'Buttons',
description: 'Provides a robust set of button styles, including preset variants.',
stylesheetIncludes: ['all', 'elements'],
stylesheets: ['elements/buttons'],
source: 'packages/plugin/src/styles/components/buttons.css',
classes: [
['<code class="code">.btn</code>', '-', 'Creates a text button using a button or anchor.'],
['<code class="code">.btn-icon</code>', '-', 'Creates a text icon button using a button or anchor.'],
['<code class="code">.btn-[value]</code>', 'sm | md | lg | xl', 'Canned button sizes that define padding and text sizes.'],
['<code class="code">.btn-icon-[value]</code>', 'sm | md | lg | xl', 'Canned icon button sizes that define padding and text sizes.']
]
};
// Local:
let currentVariant = 'variant-filled';
</script>
<DocsShell {settings}>
<!-- Slot: Sandbox -->
<svelte:fragment slot="sandbox">
<DocsPreview>
<svelte:fragment slot="preview">
<div class="flex gap-4">
<button type="button" class="btn-icon {currentVariant}">
<i class="fa-solid fa-skull"></i>
</button>
<button type="button" class="btn {currentVariant}">Button</button>
<button type="button" class="btn {currentVariant}">
<i class="fa-solid fa-skull"></i>
<span>Button</span>
</button>
</div>
</svelte:fragment>
<svelte:fragment slot="footer">
<div class="flex justify-center gap-4">
<select bind:value={currentVariant} class="select w-auto">
{#each variants as vSet}
<optgroup label={vSet.label}>
{#each vSet.list as v}
<option value={v}>{v}</option>
{/each}
</optgroup>
{/each}
</select>
</div>
</svelte:fragment>
<svelte:fragment slot="source">
<CodeBlock
language="html"
code={`
<button type="button" class="btn-icon ${currentVariant}">(icon)</button>
<button type="button" class="btn ${currentVariant}">Button</button>
<button type="button" class="btn ${currentVariant}">
<span>(icon)</span>
<span>Button</span>
</button>
`}
/>
<CodeBlock
language="html"
code={`
<a href="/" class="btn-icon ${currentVariant}">(icon)</a>
<a href="/" class="btn ${currentVariant}">a</a>
<a href="/" class="btn ${currentVariant}">
<span>(icon)</span>
<span>Anchor</span>
</a>
`}
/>
</svelte:fragment>
</DocsPreview>
</svelte:fragment>
<!-- Slot: Usage -->
<svelte:fragment slot="usage">
<p>
Use <code class="code">.btn</code> to add basic button styles to any anchor or button element. Replace with
<code class="code">.btn-icon</code>
for an icon button. Mix buttons with any arbitrary background color or variant style classes, such as
<code class="code">.variant-[style]-[themeColor]</code>.
</p>
<section class="space-y-4">
<h2 class="h2">Sizes</h2>
<p>
A number of canned size presets are available via <code class="code">.btn-[size]</code>. Default sizing matches
<code class="code">btn-md</code>.
</p>
<DocsPreview background="neutral">
<svelte:fragment slot="preview">
<div class="space-y-4">
<div class="flex justify-center items-center gap-4">
<button type="button" class="btn btn-sm variant-filled">sm</button>
<button type="button" class="btn variant-filled">md</button>
<button type="button" class="btn btn-lg variant-filled">lg</button>
<button type="button" class="btn btn-xl variant-filled">xl</button>
</div>
<hr />
<div class="flex justify-center items-center gap-4">
<button type="button" class="btn-icon btn-icon-sm variant-filled">
<i class="fa-solid fa-skull"></i>
</button>
<button type="button" class="btn-icon variant-filled">
<i class="fa-solid fa-skull"></i>
</button>
<button type="button" class="btn-icon btn-icon-lg variant-filled">
<i class="fa-solid fa-skull"></i>
</button>
<button type="button" class="btn-icon btn-icon-xl variant-filled">
<i class="fa-solid fa-skull"></i>
</button>
</div>
</div>
</svelte:fragment>
<svelte:fragment slot="source">
<CodeBlock
language="html"
code={`
<button type="button" class="btn btn-sm variant-filled">sm</button>
<button type="button" class="btn variant-filled">md</button>
<button type="button" class="btn btn-lg variant-filled">lg</button>
<button type="button" class="btn btn-xl variant-filled">xl</button>
`}
/>
<CodeBlock
language="html"
code={`
<button type="button" class="btn-icon btn-icon-sm variant-filled">(icon)</button>
<button type="button" class="btn-icon variant-filled">(icon)</button>
<button type="button" class="btn-icon btn-icon-lg variant-filled">(icon)</button>
<button type="button" class="btn-icon btn-icon-xl variant-filled">(icon)</button>
`}
/>
</svelte:fragment>
</DocsPreview>
</section>
<section class="space-y-4">
<h2 class="h2">Button Groups</h2>
<p>Groups related anchors or buttons. Pairs with any variant style. Horizontal and vertical options are provided.</p>
<DocsPreview background="neutral">
<svelte:fragment slot="preview">
<div class="btn-group variant-filled">
<button>Months</button>
<button>Days</button>
<button>Years</button>
</div>
</svelte:fragment>
<svelte:fragment slot="source">
<CodeBlock
language="html"
code={`
<div class="btn-group variant-filled">
<button>Months</button>
<button>Days</button>
<button>Years</button>
</div>
`}
/>
<!-- prettier-ignore -->
<p>Customize the vertical dividers using <a class="anchor" href="https://tailwindcss.com/blog/tailwindcss-v3-1#arbitrary-values-but-for-variants" target="_blank" rel="noreferrer">Tailwind's arbitrary variant syntax</a>.</p>
<CodeBlock language="html" code={`<div class="btn-group variant-ghost-primary [&>*+*]:border-red-500">...</div>`} />
</svelte:fragment>
</DocsPreview>
<DocsPreview background="neutral">
<svelte:fragment slot="preview">
<div class="btn-group-vertical variant-filled">
<button>Months</button>
<button>Days</button>
<button>Years</button>
</div>
</svelte:fragment>
<svelte:fragment slot="source">
<CodeBlock
language="html"
code={`
<div class="btn-group-vertical variant-filled">
<button>Months</button>
<button>Days</button>
<button>Years</button>
</div>
`}
/>
</svelte:fragment>
</DocsPreview>
</section>
<section class="space-y-4">
<h2 class="h2">SvelteKit Link Options</h2>
<!-- prettier-ignore -->
<p>
While using native anchor elements, you can take advantage of <a class="anchor" href="https://kit.svelte.dev/docs/link-options" target="_blank" rel="noreferrer">SvelteKit's Link Options</a> such as a <em>prefetch</em>.
</p>
<CodeBlock language="html" code={`<a href="/" class="btn variant-filled" data-sveltekit-preload-data="hover">Button</a>`} />
</section>
</svelte:fragment>
</DocsShell>