Spacer

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

view SpacerDemoBlock(label: str) =    <div style="padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font-size: 13px">{label}</div>view SpacerDemo() =    <div.demo-stack>        <div id="spacer-demo-column">            <SpacerDemoBlock label="Above"/>            <Spacer/>            <SpacerDemoBlock label="16px below the first (the default)"/>            <Spacer size="lg"/>            <SpacerDemoBlock label="32px below (lg)"/>            <Spacer size={50}/>            <SpacerDemoBlock label="50px below (a number)"/>        </div>        <div id="spacer-demo-row" style="display: flex; align-items: center">            <SpacerDemoBlock label="Left"/>            <Spacer horizontal={true} size="sm"/>            <SpacerDemoBlock label="8px to the right"/>            <Spacer grow={true}/>            <SpacerDemoBlock label="Pushed to the end"/>        </div>    </div>

// Spacer: empty room between things, down a column or along a row, in the kit's// sizes or in pixels. In a flex row or column it can grow instead, pushing what// follows to the far end.////   <h2>Title</h2> <Spacer size="lg"/> <p>...</p>//   <div style="display: flex"> <a>Edit</a> <Spacer horizontal={true} size="sm"/> <a>Share</a> </div>//   <nav style="display: flex"> <a>Home</a> <Spacer grow={true}/> <a>Sign in</a> </nav>//// size: "xs" (4px), "sm" (8px), "md" (16px, the default), "lg" (32px), "xl" (64px),// or a number of pixels. horizontal: room along a row (a <span>) rather than down a// column (a <div>). grow: in a flex row or column, it takes all the free room.// Screen readers skip it.import ui/theme.qwe use ui_clslet spacer_css = css`.ui-spacer { display: block; flex: none; height: var(--ui-spacer, 16px); }.ui-spacer-h { display: inline-block; width: var(--ui-spacer, 16px); height: auto; align-self: stretch; }.ui-spacer-grow { flex: 1 1 auto; }`fn spacer_px(size) -> str =    match size {        int as n => `${n}px`        float as n => `${n}px`        "xs" => "4px"        "sm" => "8px"        "lg" => "32px"        "xl" => "64px"        _ => "16px"    }view Spacer(size = "md", horizontal: bool = false, grow: bool = false, class: str? = null) {    style global spacer_css    let cls = ui_cls(["ui-spacer", horizontal && "ui-spacer-h", grow && "ui-spacer-grow", class])    let st = `--ui-spacer: ${spacer_px(size)}`    horizontal ? <span class={cls} style={st} aria-hidden="true"></span> : <div class={cls} style={st} aria-hidden="true"></div>}