Something went wrong. Try again.
Monorepo for Tangled forked from tangled.org/core
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960<script module lang="ts"> import { defineMeta } from "@storybook/addon-svelte-csf"; import CircleDot from "$icon/circle-dot"; import Ban from "$icon/ban"; import LayoutGrid from "$icon/layout-grid"; import List from "$icon/list"; import Segment from "#lib/components/ui/Segment.svelte"; import SegmentedControl from "#lib/components/ui/SegmentedControl.svelte";
const { Story } = defineMeta({ title: "UI/SegmentedControl", component: SegmentedControl, tags: ["autodocs"] });</script>
<script lang="ts"> let filter = $state("push"); let ticketState = $state("open"); let layout = $state("cards"); let size = $state("small");</script>
<Story name="Default" asChild> <SegmentedControl bind:value={filter} label="Trigger"> <Segment value="all">All</Segment> <Segment value="push">Push</Segment> <Segment value="pull_request">Pull request</Segment> </SegmentedControl></Story>
<Story name="Icons" asChild> <SegmentedControl bind:value={ticketState} label="State"> <Segment value="open" icon={CircleDot}>Open</Segment> <Segment value="closed" icon={Ban}>Closed</Segment> </SegmentedControl></Story>
<Story name="Collapsible" asChild> <SegmentedControl bind:value={ticketState} label="State"> <Segment value="open" collapsible icon={CircleDot}>Open</Segment> <Segment value="closed" collapsible icon={Ban}>Closed</Segment> </SegmentedControl></Story>
<Story name="Icon only" asChild> <SegmentedControl bind:value={layout} label="Layout"> <Segment value="cards" size="small" icon={LayoutGrid} aria-label="Cards view" /> <Segment value="list" size="small" icon={List} aria-label="List view" /> </SegmentedControl></Story>
<Story name="Full width" asChild> <SegmentedControl bind:value={size} label="Size" class="flex w-80"> <Segment value="small" class="flex-1">Small</Segment> <Segment value="regular" class="flex-1">Regular</Segment> <Segment value="large" class="flex-1">Large</Segment> </SegmentedControl></Story>