Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091<script module lang="ts"> import { defineMeta } from "@storybook/addon-svelte-csf"; import ChevronDown from "$icon/chevron-down"; import Pencil from "$icon/pencil"; import Settings from "$icon/settings"; import LogOut from "$icon/log-out"; import Dropdown from "./Dropdown.svelte"; import DropdownItem from "./DropdownItem.svelte";
const { Story } = defineMeta({ title: "UI/Dropdown", component: Dropdown, tags: ["autodocs"] });</script>
<!-- Dropdown's `trigger` and `children` are snippet props, so the trigger content is declared once below and passed by reference; every story renders via `asChild` rather than through the args table. Click the trigger in the canvas to open the menu — `open` is internal state, not a prop. -->
{#snippet menuTrigger()} <span>Menu</span> <ChevronDown class="size-4" />{/snippet}
{#snippet actionsTrigger()} <span>Actions</span> <ChevronDown class="size-4" />{/snippet}
{#snippet firstTrigger()} <span>First</span> <ChevronDown class="size-4" />{/snippet}
{#snippet secondTrigger()} <span>Second</span> <ChevronDown class="size-4" />{/snippet}
<Story name="Plain trigger" asChild> <Dropdown trigger={menuTrigger} label="Menu"> <DropdownItem icon={Pencil}>Edit</DropdownItem> <DropdownItem icon={Settings}>Settings</DropdownItem> <DropdownItem icon={LogOut} danger>Log out</DropdownItem> </Dropdown></Story>
<Story name="Button trigger" asChild> <Dropdown variant="button" trigger={actionsTrigger} label="Actions"> <DropdownItem icon={Pencil}>Edit</DropdownItem> <DropdownItem icon={Settings}>Settings</DropdownItem> </Dropdown></Story>
<!-- `align="right"` anchors the menu's right edge to the trigger, for triggers near the right edge of the viewport (e.g. the topbar profile menu). Default is left. --><Story name="Right aligned" asChild> <div class="flex justify-end"> <Dropdown align="right" trigger={menuTrigger} label="Menu"> <DropdownItem icon={Pencil}>Edit</DropdownItem> <DropdownItem icon={Settings}>Settings</DropdownItem> </Dropdown> </div></Story>
<!-- DropdownItem states: plain text, with icon, as a link (href), and the danger variant. --><Story name="Item states" asChild> <Dropdown trigger={menuTrigger} label="Menu"> <DropdownItem>Plain item</DropdownItem> <DropdownItem icon={Settings}>With icon</DropdownItem> <DropdownItem href="/">Link item</DropdownItem> <DropdownItem icon={LogOut} danger>Danger item</DropdownItem> </Dropdown></Story>
<!-- Dropdowns sharing a `group` close their siblings when one opens. --><Story name="Grouped" asChild> <div class="flex gap-3"> <Dropdown group="story-group" trigger={firstTrigger} label="First"> <DropdownItem>One</DropdownItem> <DropdownItem>Two</DropdownItem> </Dropdown> <Dropdown group="story-group" trigger={secondTrigger} label="Second"> <DropdownItem>Three</DropdownItem> <DropdownItem>Four</DropdownItem> </Dropdown> </div></Story>