alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { defineMeta } from "@storybook/addon-svelte-csf";
3 import TabPanel from "./TabPanel.svelte";
4 import Tabs from "./Tabs.svelte";
5 import SquareChartGantt from "$icon/square-chart-gantt";
6 import CircleDot from "$icon/circle-dot";
7 import GitPullRequest from "$icon/git-pull-request";
8
9 const tabs = [
10 { id: "overview", label: "Overview", icon: SquareChartGantt, href: "#" },
11 { id: "issues", label: "Issues", icon: CircleDot, count: 7, href: "#" },
12 { id: "pulls", label: "Pulls", icon: GitPullRequest, href: "#" }
13 ];
14
15 const { Story } = defineMeta({
16 title: "UI/TabPanel",
17 component: TabPanel,
18 tags: ["autodocs"]
19 });
20</script>
21
22<Story name="Default" asChild>
23 <div class="mx-auto max-w-screen-lg">
24 <Tabs {tabs} active="overview" label="example sections" />
25 <TabPanel>
26 <p>The active tab's bottom edge merges into this panel — one continuous outline.</p>
27 </TabPanel>
28 </div>
29</Story>
30
31<Story name="Second tab active" asChild>
32 <div class="mx-auto max-w-screen-lg">
33 <Tabs {tabs} active="issues" label="example sections" />
34 <TabPanel>
35 <p>"Issues" is active now, and the seam moves with it.</p>
36 </TabPanel>
37 </div>
38</Story>
39
40<Story name="Custom padding" asChild>
41 <div class="mx-auto max-w-screen-lg">
42 <Tabs {tabs} active="overview" label="example sections" />
43 <TabPanel class="py-6">
44 <p>Roomier vertical padding (py-6) for form-heavy pages.</p>
45 </TabPanel>
46 </div>
47</Story>
48
49<Story name="Unpadded grid" asChild>
50 <div class="mx-auto max-w-screen-lg">
51 <Tabs {tabs} active="overview" label="example sections" />
52 <TabPanel as="div" padded={false} class="grid md:grid-cols-3 md:gap-4 md:p-6">
53 <div class="p-6 md:p-0">Sidebar</div>
54 <div class="border-t border-border-default p-6 md:col-span-2 md:border-t-0 md:p-0">
55 Main content laid out by the caller.
56 </div>
57 </TabPanel>
58 </div>
59</Story>