Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107<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 "$lib/components/ui/Dropdown.svelte"; import DropdownItem from "$lib/components/ui/DropdownItem.svelte";
const { Story } = defineMeta({ title: "UI/Dropdown", component: Dropdown, tags: ["autodocs"] });</script>
<!-- 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>
<!-- `size` goes straight to the trigger Button, so it drives the trigger's height, padding and label size the same way it does on a standalone Button. --><Story name="Button trigger sizes" asChild> <div class="flex items-center gap-3"> <Dropdown variant="button" size="small" trigger={actionsTrigger} label="Actions"> <DropdownItem icon={Pencil}>Edit</DropdownItem> <DropdownItem icon={Settings}>Settings</DropdownItem> </Dropdown> <Dropdown variant="button" size="regular" trigger={actionsTrigger} label="Actions"> <DropdownItem icon={Pencil}>Edit</DropdownItem> <DropdownItem icon={Settings}>Settings</DropdownItem> </Dropdown> <Dropdown variant="button" size="large" trigger={actionsTrigger} label="Actions"> <DropdownItem icon={Pencil}>Edit</DropdownItem> <DropdownItem icon={Settings}>Settings</DropdownItem> </Dropdown> </div></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>
<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>