Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253<script module lang="ts"> import { defineMeta } from "@storybook/addon-svelte-csf"; import Toggle from "$lib/components/ui/Toggle.svelte";
const { Story } = defineMeta({ title: "UI/Toggle", component: Toggle, tags: ["autodocs"], argTypes: { checked: { control: "boolean" }, disabled: { control: "boolean" }, layout: { control: "inline-radio", options: ["inline", "block"] }, size: { control: "inline-radio", options: ["small", "regular"] } }, args: { checked: false, disabled: false, layout: "inline", size: "regular" } });</script>
<Story name="Default">Label</Story><Story name="Checked" args={{ checked: true }}>Label</Story><Story name="Disabled" args={{ disabled: true }}>Label</Story><Story name="Disabled checked" args={{ disabled: true, checked: true }}>Label</Story>
<Story name="Without label" />
<Story name="States"> <div class="flex flex-col gap-sm"> <Toggle>Unchecked</Toggle> <Toggle checked>Checked</Toggle> <Toggle disabled>Disabled</Toggle> <Toggle disabled checked>Disabled checked</Toggle> </div></Story>
<Story name="Block layout"> <div class="flex w-64 flex-col gap-sm"> <Toggle layout="block">Label pushed to the far edge</Toggle> <Toggle layout="block" checked>Another one, wrapping when the text runs long</Toggle> </div></Story>
<Story name="Sizes"> <div class="flex flex-col gap-sm"> <Toggle size="small">Small</Toggle> <Toggle size="regular">Regular</Toggle> </div></Story>