Divider
A line between parts of a page, across or upright, with a label in the middle if it has one.
Demo
Above the line.
or
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/divider.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/divider.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/divider.qwe
view DividerDemo() = <div.demo-stack.demo-narrow> <p.demo-note>Above the line.</p> <Divider spacing="sm"/> <Button variant="outline" full={true}>Continue with email</Button> <Divider label="or"/> <Button variant="outline" full={true}>Continue with a passkey</Button> <div.demo-row style="gap: 0"> <Button variant="ghost" size="sm">Edit</Button> <Divider vertical={true} spacing="sm"/> <Button variant="ghost" size="sm">Share</Button> <Divider vertical={true} spacing="sm"/> <Button variant="ghost" size="sm">Archive</Button> </div> </div>Source
ui/divider.qwe
// Divider: a line between parts of a page, across or upright, with a label in// its middle if it is given one.//// <Divider/>// <Divider label="or"/>// <div style="display: flex"> <a>Edit</a> <Divider vertical={true}/> <a>Share</a> </div>//// vertical: an upright line, as tall as the row it is in. spacing: "sm", "md"// (default) or "lg", the room around it.import ui/theme.qwe use ui_clslet divider_css = css`.ui-divider { flex: none; margin: 16px 0; border: 0; border-top: 1px solid var(--ui-border); }.ui-divider-v { align-self: stretch; min-height: 1em; margin: 0 12px; border-top: 0; border-left: 1px solid var(--ui-border); }.ui-divider-label { display: flex; align-items: center; gap: 12px; border: 0; color: var(--ui-muted); font: 500 12px/1.4 var(--ui-font); letter-spacing: .02em; white-space: nowrap;}.ui-divider-label::before, .ui-divider-label::after { content: ""; flex: 1; border-top: 1px solid var(--ui-border); }.ui-divider-label.ui-divider-v { flex-direction: column; gap: 6px; border: 0; }.ui-divider-label.ui-divider-v::before, .ui-divider-label.ui-divider-v::after { border-top: 0; border-left: 1px solid var(--ui-border); }.ui-divider-sm { margin-block: 8px; }.ui-divider-lg { margin-block: 28px; }.ui-divider-v.ui-divider-sm { margin: 0 6px; }.ui-divider-v.ui-divider-lg { margin: 0 20px; }`view Divider(label: str? = null, vertical: bool = false, spacing: str = "md", class: str? = null) { style global divider_css let cls = ui_cls(["ui-divider", vertical && "ui-divider-v", label != null && "ui-divider-label", spacing != "md" && `ui-divider-${spacing}`, class]) label != null ? <div class={cls}><span>{label}</span></div> : vertical ? <div class={cls} role="separator" aria-orientation="vertical"></div> : <hr class={cls}/>}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 Divider: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.