diff options
| author | ivarlovlie <git@ivarlovlie.no> | 2022-10-11 06:55:31 +0200 |
|---|---|---|
| committer | ivarlovlie <git@ivarlovlie.no> | 2022-10-11 06:55:31 +0200 |
| commit | 9372f7da2f86e43a8fc35b5042610782795d79f6 (patch) | |
| tree | 633494bbf62be0b75c14557a57c55b74aafae862 /code/app/src/routes/book | |
| parent | c2c69ce73461ce6335bb0be67bdec52e95f3aafe (diff) | |
| download | greatoffice-9372f7da2f86e43a8fc35b5042610782795d79f6.tar.xz greatoffice-9372f7da2f86e43a8fc35b5042610782795d79f6.zip | |
feat: Add badges
Diffstat (limited to 'code/app/src/routes/book')
| -rw-r--r-- | code/app/src/routes/book/+layout.svelte | 1 | ||||
| -rw-r--r-- | code/app/src/routes/book/badges/+page.svelte | 18 |
2 files changed, 19 insertions, 0 deletions
diff --git a/code/app/src/routes/book/+layout.svelte b/code/app/src/routes/book/+layout.svelte index f5287e0..bc40e67 100644 --- a/code/app/src/routes/book/+layout.svelte +++ b/code/app/src/routes/book/+layout.svelte @@ -9,6 +9,7 @@ <a href="/book/buttons" class="link" class:active={$page.url.pathname.startsWith("/book/buttons")}>Buttons</a> <a href="/book/toggles" class="link" class:active={$page.url.pathname.startsWith("/book/toggles")}>Toggles</a> <a href="/book/inputs" class="link" class:active={$page.url.pathname.startsWith("/book/inputs")}>Inputs</a> + <a href="/book/badges" class="link" class:active={$page.url.pathname.startsWith("/book/badges")}>Badges</a> </nav> <main> <slot /> diff --git a/code/app/src/routes/book/badges/+page.svelte b/code/app/src/routes/book/badges/+page.svelte new file mode 100644 index 0000000..1e06a7c --- /dev/null +++ b/code/app/src/routes/book/badges/+page.svelte @@ -0,0 +1,18 @@ +<script lang="ts"> + import Badge from "$lib/components/badge.svelte"; +</script> + +<section> + <h2>Variants</h2> + <Badge text="default" /> + <Badge type="blue" text="blue" /> + <Badge type="green" text="green" /> + <Badge type="red" text="red" /> + <Badge type="tame" text="tame" /> + <Badge type="yellow" text="yellow" /> + <Badge size="large" text="large" /> + <Badge text="with dot" withDot type="blue" /> + <Badge text="removable" removeable id="badge-1" on:remove={(e) => alert("removed " + e.detail.id)} /> + <Badge text="with dot" size="large" withDot type="blue" /> + <Badge text="removable" removeable size="large" id="badge-2" uppercase on:remove={(e) => alert("removed " + e.detail.id)} /> +</section> |