Switcher
Children side by side until the row would be too narrow, then each on its own line, with no in-between.
Demo
Starter
Team
Business
The same three in a 400px-wide box, under the 640px threshold: each on a line of its own.
Starter
Team
Business
Five with limit=4: too many for a row, so they stack whatever the width.
Item 1
Item 2
Item 3
Item 4
Item 5
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/switcher.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/switcher.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/switcher.qwe
view SwitcherDemoCell(label: str) = <div style="padding: 18px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); text-align: center; font-size: 13px">{label}</div>view SwitcherDemo() = <div.demo-stack> <Switcher id="switcher-demo-three"> <SwitcherDemoCell label="Starter"/><SwitcherDemoCell label="Team"/><SwitcherDemoCell label="Business"/> </Switcher> <p.demo-note>The same three in a 400px-wide box, under the 640px threshold: each on a line of its own.</p> <div style="width: 400px; max-width: 100%"> <Switcher id="switcher-demo-narrow"> <SwitcherDemoCell label="Starter"/><SwitcherDemoCell label="Team"/><SwitcherDemoCell label="Business"/> </Switcher> </div> <p.demo-note>Five with limit={4}: too many for a row, so they stack whatever the width.</p> <Switcher id="switcher-demo-many" limit={4} gap="sm"> {for i in range(1, 6) => <SwitcherDemoCell label={`Item ${i}`}/>} </Switcher> </div>Source
ui/switcher.qwe
// Switcher: its children side by side, sharing the width, until the row would be// narrower than a threshold; then every one goes on a line of its own. No in-// between: never two on one line and one below. It measures its own width, not// the window's, in CSS alone.//// <Switcher threshold="720px"> <Card>...</Card> <Card>...</Card> <Card>...</Card> </Switcher>// <Switcher limit={2} gap="lg"> <img .../> <div>...</div> </Switcher>//// threshold: the width, as CSS, under which they stack ("640px").// limit: at most this many side by side (4, up to 6); more than that stack whatever// the width, so a long list does not make a row of slivers.// gap: pixels (16, the default) or "none", "xs" (4), "sm" (8), "md" (16), "lg" (24), "xl" (32).import ui/theme.qwe use ui_clslet switcher_css = css`.ui-switcher { display: flex; flex-wrap: wrap; gap: var(--ui-switcher-gap, 16px); min-width: 0; }.ui-switcher > *, .ui-switcher > quillo-raw > * { flex-grow: 1; flex-basis: calc((var(--ui-switcher-at, 640px) - 100%) * 999); min-width: 0; }.ui-switcher-2 > :nth-last-child(n + 3), .ui-switcher-2 > :nth-last-child(n + 3) ~ *,.ui-switcher-2 > quillo-raw > :nth-last-child(n + 3), .ui-switcher-2 > quillo-raw > :nth-last-child(n + 3) ~ * { flex-basis: 100%; }.ui-switcher-3 > :nth-last-child(n + 4), .ui-switcher-3 > :nth-last-child(n + 4) ~ *,.ui-switcher-3 > quillo-raw > :nth-last-child(n + 4), .ui-switcher-3 > quillo-raw > :nth-last-child(n + 4) ~ * { flex-basis: 100%; }.ui-switcher-4 > :nth-last-child(n + 5), .ui-switcher-4 > :nth-last-child(n + 5) ~ *,.ui-switcher-4 > quillo-raw > :nth-last-child(n + 5), .ui-switcher-4 > quillo-raw > :nth-last-child(n + 5) ~ * { flex-basis: 100%; }.ui-switcher-5 > :nth-last-child(n + 6), .ui-switcher-5 > :nth-last-child(n + 6) ~ *,.ui-switcher-5 > quillo-raw > :nth-last-child(n + 6), .ui-switcher-5 > quillo-raw > :nth-last-child(n + 6) ~ * { flex-basis: 100%; }.ui-switcher-6 > :nth-last-child(n + 7), .ui-switcher-6 > :nth-last-child(n + 7) ~ *,.ui-switcher-6 > quillo-raw > :nth-last-child(n + 7), .ui-switcher-6 > quillo-raw > :nth-last-child(n + 7) ~ * { flex-basis: 100%; }`fn switcher_gap(gap) -> str = match gap { int as n => `${n}px` float as n => `${n}px` "none" => "0" "xs" => "4px" "sm" => "8px" "lg" => "24px" "xl" => "32px" _ => "16px" }view Switcher(threshold: str = "640px", limit: int = 4, gap = 16, id: str? = null, class: str? = null, children) { style global switcher_css let cap = limit < 2 ? 2 : limit > 6 ? 6 : limit <div class={ui_cls(["ui-switcher", `ui-switcher-${cap}`, class])} id={id} style={`--ui-switcher-at: ${threshold}; --ui-switcher-gap: ${switcher_gap(gap)}`}> {children} </div>}Related
BentoGridA grid of tiles spanning columns and rows, with titles, tints and links, packed to leave no holes.9 views · 6 downloadsColumnsChildren side by side, equal or weighted, that go one under another when their box is narrow.7 views · 9 downloadsGridColumns that fit the screen: as many as fit a minimum width, or a fixed number that folds on phones.6 views · 7 downloadsMasonryCards of different heights packed into columns, each filled from the top, on CSS columns alone.6 views · 7 downloadsActionBarA 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 downloads
Thread
Thread 0 posts
On Switcher: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.