import { NAME, pattern, UI, type VNode, Writable } from "commonfabric"; import { Controls, SelectControl, SwitchControl, } from "../ui/controls/index.ts"; // deno-lint-ignore no-empty-interface interface VStackStoryInput {} export interface VStackStoryOutput { [NAME]: string; [UI]: VNode; controls: VNode; } export default pattern(() => { const gap = new Writable<"0" | "1" | "2" | "3" | "4" | "6" | "8">("2"); const reverse = new Writable(false); return { [NAME]: "cf-vstack Story", [UI]: (
Interactive
Item 1
Item 2
Item 3
Gap Comparison
gap=0
A
B
C
gap=2
A
B
C
gap=4
A
B
C
Directional Padding
padding=4
Uniform
padding=4 pt=1
pt overrides top
px=6 py=2
Axis padding
), controls: ( <> ), }; });