Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
at icy/tmrrpn
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960<script module lang="ts"> import { defineMeta } from "@storybook/addon-svelte-csf"; import TabPanel from "./TabPanel.svelte"; import Tabs from "./Tabs.svelte"; import SquareChartGantt from "$icon/square-chart-gantt"; import CircleDot from "$icon/circle-dot"; import GitPullRequest from "$icon/git-pull-request";
const tabs = [ { id: "overview", label: "Overview", icon: SquareChartGantt, href: "#" }, { id: "issues", label: "Issues", icon: CircleDot, count: 7, href: "#" }, { id: "pulls", label: "Pulls", icon: GitPullRequest, href: "#" } ];
const { Story } = defineMeta({ title: "UI/TabPanel", component: TabPanel, tags: ["autodocs"] });</script>
<Story name="Default" asChild> <div class="mx-auto max-w-5xl"> <Tabs {tabs} active="overview" label="example sections" /> <TabPanel> <p>The active tab's bottom edge merges into this panel — one continuous outline.</p> </TabPanel> </div></Story>
<Story name="Second tab active" asChild> <div class="mx-auto max-w-5xl"> <Tabs {tabs} active="issues" label="example sections" /> <TabPanel> <p>"Issues" is active now, and the seam moves with it.</p> </TabPanel> </div></Story>
<Story name="Custom padding" asChild> <div class="mx-auto max-w-5xl"> <Tabs {tabs} active="overview" label="example sections" /> <TabPanel class="py-6"> <p>Roomier vertical padding (py-6) for form-heavy pages.</p> </TabPanel> </div></Story>
<Story name="Unpadded grid" asChild> <div class="mx-auto max-w-5xl"> <Tabs {tabs} active="overview" label="example sections" /> <TabPanel as="div" padded={false} class="grid md:grid-cols-3 md:gap-4 md:p-6"> <div class="p-6 md:p-0">Sidebar</div> <div class="border-t border-border-default p-6 md:col-span-2 md:border-t-0 md:p-0"> Main content laid out by the caller. </div> </TabPanel> </div></Story>