Demo
size="sm"
size="md"
size="lg"
Each is centred at its width, at most; the dashed lines are the container's padding edge.
Get it
It needs theme.qwe, as every component does; or take the whole kit, quillo-ui.qwe. Each component brings its own styles to the pages that show it.
$ curl -O https://quillolang.org/components/ui/theme.qwe$ curl -O https://quillolang.org/components/ui/container.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/container.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/container.qwe
view ContainerDemo() = <div.demo-stack> {for s in ["sm", "md", "lg"] => <div style="background: var(--ui-subtle); border-radius: var(--ui-radius-sm)"> <Container size={s}> <div style="padding: 10px 0; border-inline: 1px dashed var(--ui-strong); text-align: center; font-size: 13px; color: var(--ui-muted)"> size="{s}" </div> </Container> </div>} <p.demo-note>Each is centred at its width, at most; the dashed lines are the container's padding edge.</p> </div>Source
ui/container.qwe
// Container: keeps a page's content at a readable width, centred, with room at// the sides on small screens.//// <Container><h1>Settings</h1> ... </Container>// <Container size="sm"> ... a sign-in form ... </Container>//// size: "sm" (640px), "md" (860px), "lg" (1140px, default) or "full" (no limit).// pad: false leaves out the side padding (16px, 24px on wider screens).import ui/theme.qwe use ui_clslet container_css = css`.ui-container { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 16px; }.ui-container-sm { max-width: 640px; }.ui-container-md { max-width: 860px; }.ui-container-full { max-width: none; }.ui-container-flush { padding-inline: 0; }@media (min-width: 640px) { .ui-container:not(.ui-container-flush) { padding-inline: 24px; } }`view Container(size: str = "lg", pad: bool = true, class: str? = null, children) { style global container_css <div class={ui_cls(["ui-container", size != "lg" && `ui-container-${size}`, !pad && "ui-container-flush", class])}> {children} </div>}Related
ActionBarA page's main action and a line about it, fixed to the bottom of the screen on a phone.13 views · 6 downloadsAppShellAn app's frame: a sidebar of links, a top bar and the page; the sidebar is a drawer on phones.10 views · 7 downloadsAspectRatioKeeps what it holds at a shape (16/9, 4/3, 1): an image or a video fills a box of the right height.9 views · 7 downloadsBentoGridA grid of tiles spanning columns and rows, with titles, tints and links, packed to leave no holes.9 views · 6 downloadsBrowserFrameA mock browser window around its content, with the address in its bar, for screenshots and demos.7 views · 6 downloadsCardA surface for one thing, with a title, a header and a footer, or a link as a whole.8 views · 6 downloads
Thread
Thread 0 posts
On Container: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.