Stack

import ui/theme.qwe use theme_cssuse ui/stack.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>

view StackDemoBox(label: str) =    <div style="padding: 10px 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font-size: 13px">{label}</div>view StackDemo() =    <div.demo-stack>        <Stack direction="row" gap="xl" wrap={true}>            <div style="width: 180px">                <Stack gap="xs"><StackDemoBox label="column"/><StackDemoBox label="gap xs"/><StackDemoBox label="stretch"/></Stack>            </div>            <div style="width: 180px">                <Stack gap={16} align="start"><StackDemoBox label="gap 16"/><StackDemoBox label="align start"/><StackDemoBox label="three"/></Stack>            </div>            <div style="width: 180px">                <Stack align="center"><StackDemoBox label="align"/><StackDemoBox label="center"/><StackDemoBox label="in the middle"/></Stack>            </div>        </Stack>        <Stack direction="row" justify="between" align="center">            <StackDemoBox label="row"/><StackDemoBox label="justify between"/><StackDemoBox label="end"/>        </Stack>        <Stack direction="row" gap="sm" wrap={true} collapse={true}>            <StackDemoBox label="wrap"/><StackDemoBox label="and collapse"/><StackDemoBox label="into a column"/>            <StackDemoBox label="on phones"/>        </Stack>    </div>

// Stack: lays its children out in a column or a row, evenly spaced.////   <Stack gap="lg"> <h2>Profile</h2> <p>...</p> </Stack>//   <Stack direction="row" align="center" justify="between" wrap={true}> ... </Stack>//// direction: "column" (default) or "row". collapse: a row becomes a column on// phones (under 640px).// gap: pixels (12, the default) or "none", "xs" (4), "sm" (8), "md" (12), "lg" (20), "xl" (32).// align (across): "stretch" (default), "start", "center", "end" or "baseline".// justify (along): "start" (default), "center", "end", "between", "around" or "evenly".// wrap: rows go on to a new line when they run out of room.import ui/theme.qwe use ui_clslet stack_css = css`.ui-stack { display: flex; flex-direction: column; gap: var(--ui-stack-gap, 12px); min-width: 0; }.ui-stack-row { flex-direction: row; }.ui-stack-wrap { flex-wrap: wrap; }@media (max-width: 639px) { .ui-stack-collapse { flex-direction: column; } }`fn stack_gap(gap) =    match gap {        int as n => `${n}px`        float as n => `${n}px`        "none" => "0"        "xs" => "4px"        "sm" => "8px"        "lg" => "20px"        "xl" => "32px"        _ => "12px"    }fn stack_flex(v: str) =    match v {        "start" => "flex-start"        "end" => "flex-end"        "between" => "space-between"        "around" => "space-around"        "evenly" => "space-evenly"        _ => v    }view Stack(direction: str = "column", gap = 12, align: str = "stretch", justify: str = "start",           wrap: bool = false, collapse: bool = false, class: str? = null, children) {    style global stack_css    <div class={ui_cls(["ui-stack", direction == "row" && "ui-stack-row", wrap && "ui-stack-wrap",                        collapse && "ui-stack-collapse", class])}         style={`--ui-stack-gap: ${stack_gap(gap)}; align-items: ${stack_flex(align)}; justify-content: ${stack_flex(justify)}`}>        {children}    </div>}