alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { defineMeta } from "@storybook/addon-svelte-csf";
3 import Toggle from "./Toggle.svelte";
4
5 const { Story } = defineMeta({
6 title: "UI/Toggle",
7 component: Toggle,
8 tags: ["autodocs"],
9 argTypes: {
10 checked: { control: "boolean" },
11 disabled: { control: "boolean" },
12 layout: { control: "inline-radio", options: ["inline", "block"] }
13 },
14 args: {
15 checked: false,
16 disabled: false,
17 layout: "inline"
18 }
19 });
20</script>
21
22<!-- Toggle content comes through its `children` snippet, provided here as Story slot content. -->
23<Story name="Default">Label</Story>
24<Story name="Checked" args={{ checked: true }}>Label</Story>
25<Story name="Disabled" args={{ disabled: true }}>Label</Story>
26<Story name="Disabled checked" args={{ disabled: true, checked: true }}>Label</Story>
27
28<Story name="Without label" />
29
30<Story name="States">
31 <div class="flex flex-col gap-3">
32 <Toggle>Unchecked</Toggle>
33 <Toggle checked>Checked</Toggle>
34 <Toggle disabled>Disabled</Toggle>
35 <Toggle disabled checked>Disabled checked</Toggle>
36 </div>
37</Story>
38
39<Story name="Block layout">
40 <div class="flex w-64 flex-col gap-3">
41 <Toggle layout="block">Label pushed to the far edge</Toggle>
42 <Toggle layout="block" checked>Another one, wrapping when the text runs long</Toggle>
43 </div>
44</Story>