-
-
Notifications
You must be signed in to change notification settings - Fork 300
/
+page.svelte
136 lines (132 loc) · 5.09 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
<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';
import { variants } from '$lib/components/DocsPreview/options';
import { getImageLink } from '$lib/images';
// Components
import { Avatar, CodeBlock } from '@skeletonlabs/skeleton';
// Docs Shell
const settings: DocsShellSettings = {
feature: DocsFeature.Element,
name: 'Cards',
description: 'Provides container elements that wrap and separate content',
stylesheetIncludes: ['all', 'elements'],
stylesheets: ['elements/cards'],
source: 'packages/plugin/src/styles/components/cards.css',
classes: [
['<code class="code">.card</code>', '-', 'Adds basic card styling to any block element.'],
['<code class="code">.card-header</code>', '-', 'The header region of the card.'],
['<code class="code">.card-footer</code>', '-', 'The footer region of the card.'],
['<code class="code">.card-hover</code>', '-', 'Provides an animated hover effect.']
]
};
// Local
let currentVariant = 'bg-initial';
</script>
<DocsShell {settings}>
<!-- Slot: Sandbox -->
<svelte:fragment slot="sandbox">
<DocsPreview>
<svelte:fragment slot="preview">
<div class="w-full text-token grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Minimal -->
<div class="card {currentVariant} p-4 flex justify-center items-center"><span>Minimal</span></div>
<!-- Detailed -->
<a class="card {currentVariant} card-hover overflow-hidden" href="/elements/cards">
<header>
<img src={getImageLink({ id: 'vjUokUWbFOs', w: 400, h: 175 })} class="bg-black/50 w-full aspect-[21/9]" alt="Post" />
</header>
<div class="p-4 space-y-4">
<h6 class="h6" data-toc-ignore>Announcements</h6>
<h3 class="h3" data-toc-ignore>Skeleton is Awesome!</h3>
<article>
<p>
<!-- cspell:disable -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam aspernatur provident eveniet eligendi cumque consequatur tempore
sint nisi sapiente. Iste beatae laboriosam iure molestias cum expedita architecto itaque quae rem.
<!-- cspell:enable -->
</p>
</article>
</div>
<hr class="opacity-50" />
<footer class="p-4 flex justify-start items-center space-x-4">
<Avatar src={getImageLink({ id: 'YOErFW8AfkI', w: 32, h: 32 })} width="w-8" />
<div class="flex-auto flex justify-between items-center">
<h6 class="font-bold" data-toc-ignore>By Alex</h6>
<small>On {new Date().toLocaleDateString()}</small>
</div>
</footer>
</a>
</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={`<div class="card p-4">Basic</div>`} />
<CodeBlock language="html" code={`<a href="/" class="card p-4">Link</a>`} />
</svelte:fragment>
</DocsPreview>
</svelte:fragment>
<!-- Slot: Usage -->
<svelte:fragment slot="usage">
<section class="space-y-4">
<h2 class="h2">Headers and Footers</h2>
<p>Segment your card using the included <code class="code">.card-header</code> and <code class="code">.card-footer</code> classes.</p>
<DocsPreview background="neutral">
<svelte:fragment slot="preview">
<div class="w-full text-token">
<div class="card">
<header class="card-header">
<div class="card variant-soft p-4 text-center">Header</div>
</header>
<section class="p-4">
<div class="card variant-soft p-4 text-center">Content</div>
</section>
<footer class="card-footer">
<div class="card variant-soft p-4 text-center">Footer</div>
</footer>
</div>
</div>
</svelte:fragment>
<svelte:fragment slot="source">
<CodeBlock
language="html"
code={`
<div class="card">
<header class="card-header">(header)</header>
<section class="p-4">(content)</section>
<footer class="card-footer">(footer)</footer>
</div>
`}
/>
</svelte:fragment>
</DocsPreview>
</section>
<section class="space-y-4">
<h2 class="h2">Interactive</h2>
<p>Anchor cards have an inherent hover style. Add <code class="code">.card-hover</code> to provide an additional 3D hover effect.</p>
<DocsPreview background="neutral">
<svelte:fragment slot="preview">
<div class="w-full text-token">
<a class="block card card-hover p-4 text-center" href="/elements/cards">Hover Me!</a>
</div>
</svelte:fragment>
<svelte:fragment slot="source">
<CodeBlock language="html" code={`<a class="block card card-hover p-4" href="/elements/cards">Hover Me!</a>`} />
</svelte:fragment>
</DocsPreview>
</section>
</svelte:fragment>
</DocsShell>