Demo
New in 0.9
Live queries
Beta
Channels over WebTransport
ShippedIn reviewBlockedGuide
Pricing
Plans for every team
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/eyebrow.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/eyebrow.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/eyebrow.qwe
view EyebrowDemo() = <div.demo-stack> <div> <Eyebrow id="eyebrow-demo-new">New in 0.9</Eyebrow> <Heading level={2} id="eyebrow-demo-title">Live queries</Heading> </div> <div> <Eyebrow tone="accent" dot={true} id="eyebrow-demo-beta">Beta</Eyebrow> <Heading level={3}>Channels over WebTransport</Heading> </div> <div.demo-row> <Eyebrow tag="span" tone="success" dot={true}>Shipped</Eyebrow> <Eyebrow tag="span" tone="warning" dot={true}>In review</Eyebrow> <Eyebrow tag="span" tone="danger" dot={true}>Blocked</Eyebrow> <Eyebrow tag="span" tone="info">Guide</Eyebrow> </div> <div> <Eyebrow align="center" id="eyebrow-demo-center">Pricing</Eyebrow> <Heading level={2} align="center">Plans for every team</Heading> </div> </div>Source
ui/eyebrow.qwe
// Eyebrow: a small uppercase label above a heading: the section, the category,// the kind of thing on the page.//// <Eyebrow>New in 0.9</Eyebrow>// <Heading level={1}>Live queries</Heading>// <Eyebrow tone="accent" dot={true}>Beta</Eyebrow>//// children: the text. tone: "muted" (default), "accent", "success", "warning",// "danger" or "info". dot: a coloured dot before the text. tag: "p" (default),// "span" or "div". align: "start" (default), "center" or "end". id: the element's id.import ui/theme.qwe use ui_clslet eyebrow_css = css`.ui-eyebrow { display: block; margin: 0 0 6px; font: 600 12px/1.4 var(--ui-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ui-muted); --e: var(--ui-muted); }span.ui-eyebrow { display: inline-flex; margin: 0; }.ui-eyebrow-accent { color: var(--ui-accent); --e: var(--ui-accent); }.ui-eyebrow-success { color: var(--ui-success); --e: var(--ui-success); }.ui-eyebrow-warning { color: var(--ui-warning); --e: var(--ui-warning); }.ui-eyebrow-danger { color: var(--ui-danger); --e: var(--ui-danger); }.ui-eyebrow-info { color: var(--ui-info); --e: var(--ui-info); }.ui-eyebrow-dot::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--e); vertical-align: middle; }.ui-eyebrow-center { text-align: center; }.ui-eyebrow-end { text-align: end; }`view Eyebrow(tone: str = "muted", dot: bool = false, tag: str = "p", align: str = "start", id: str? = null, class: str? = null, children) { style global eyebrow_css let cls = ui_cls(["ui-eyebrow", tone != "muted" && `ui-eyebrow-${tone}`, dot && "ui-eyebrow-dot", align != "start" && `ui-eyebrow-${align}`, class]) match tag { "span" => <span class={cls} id={id}>{children}</span> "div" => <div class={cls} id={id}>{children}</div> _ => <p class={cls} id={id}>{children}</p> }}Related
GradientTextText filled with a gradient: the theme's, a preset, or any two colours at an angle.5 views · 7 downloadsAbbrAn abbreviation whose expansion shows in a bubble on hover or focus and is read out by screen readers.6 views · 5 downloadsBlockquoteA quotation with the person and the source in a figure, as a bar, with a quote mark, or plain.6 views · 7 downloadsBulletListAn unordered list with dot, tick, arrow, star, dash or any glyph bullets, in a tone and a spacing.6 views · 7 downloadsCaptionSmall muted text under a figure, a table or a field, as the right element for each.5 views · 8 downloadsDropCapA paragraph whose first letter is set large and dropped into the first two, three or four lines.5 views · 6 downloads
Thread
Thread 0 posts
On Eyebrow: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.