Center

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

view CenterDemo() =    <div.demo-stack>        <Center limit={420} class="center-demo-form">            <div style="padding: 16px; border: 1px dashed var(--ui-strong); border-radius: var(--ui-radius-sm); text-align: left">                A column no wider than 420px, centred, with the room left over at its sides.            </div>        </Center>        <Center intrinsic={true} class="center-demo-button"><Button variant="outline">Load more</Button></Center>        <Center text={true} limit={520} class="center-demo-text">            <p style="margin: 0; color: var(--ui-muted)">Text centred as well, kept to 520px so the lines stay short enough to read.</p>        </Center>    </div>

// Center: puts its content in the middle of the room it has: a column kept to a// width and centred, a thing centred by its own width, text centred, or all three.////   <Center limit={560}> <h1>Sign in</h1> <form>...</form> </Center>//   <Center intrinsic={true}> <Button>Load more</Button> </Center>//   <Center text={true} limit={640}> <p>A line or two, centred and not too wide.</p> </Center>//// limit: how wide the content may be, in pixels (640; 0 for no limit): it is centred// with the room left over at the sides. intrinsic: the content is as wide as it is// (a button, an image) and centred. text: the text inside is centred too.// gutter: room at the sides kept even when it is narrow, in pixels (0).import ui/theme.qwe use ui_clslet center_css = css`.ui-center { box-sizing: content-box; max-width: var(--ui-center-max, none); min-width: 0; margin-inline: auto; padding-inline: var(--ui-center-gutter, 0); }.ui-center-text { text-align: center; }.ui-center-intrinsic { display: flex; flex-direction: column; align-items: center; }`view Center(limit: int = 640, intrinsic: bool = false, text: bool = false, gutter: int = 0, class: str? = null, children) {    style global center_css    <div class={ui_cls(["ui-center", intrinsic && "ui-center-intrinsic", text && "ui-center-text", class])}         style={`--ui-center-max: ${limit > 0 ? `${limit}px` : "none"}; --ui-center-gutter: ${gutter}px`}>        {children}    </div>}