Text
A paragraph or span in the kit's sizes, weights, tones and alignments, so prose matches the components.
Demo
Quillo renders a page on the server and resumes its components in the browser, so it shows at once and reacts as soon as it is touched.
Last edited 2 hours ago by Ada.
Extra smallSmallMediumLargeExtra large
NormalMediumSemiboldBoldItalicmono: 0x1F
AccentSuccessWarning3 failedInfo
Nothing here yet.
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/text.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/text.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/text.qwe
view TextDemo() = <div.demo-stack> <div> <Text id="text-demo-plain">Quillo renders a page on the server and resumes its components in the browser, so it shows at once and reacts as soon as it is touched.</Text> <Text size="sm" tone="muted" id="text-demo-muted">Last edited 2 hours ago by Ada.</Text> </div> <div.demo-row> <Text tag="span" size="xs">Extra small</Text> <Text tag="span" size="sm">Small</Text> <Text tag="span">Medium</Text> <Text tag="span" size="lg">Large</Text> <Text tag="span" size="xl">Extra large</Text> </div> <div.demo-row> <Text tag="span" weight="normal">Normal</Text> <Text tag="span" weight="medium">Medium</Text> <Text tag="span" weight="semibold">Semibold</Text> <Text tag="span" weight="bold" id="text-demo-bold">Bold</Text> <Text tag="span" italic={true}>Italic</Text> <Text tag="span" mono={true} id="text-demo-mono">mono: 0x1F</Text> </div> <div.demo-row> <Text tag="span" tone="accent">Accent</Text> <Text tag="span" tone="success">Success</Text> <Text tag="span" tone="warning">Warning</Text> <Text tag="span" tone="danger" weight="semibold">3 failed</Text> <Text tag="span" tone="info">Info</Text> </div> <Text align="center" size="lg" tone="muted" id="text-demo-center">Nothing here yet.</Text> </div>Source
ui/text.qwe
// Text: a paragraph or a span of text in the kit's sizes, weights, tones and alignments,// so a page's prose matches its components without CSS of its own.//// <Text>Your changes are saved as you type.</Text>// <Text size="sm" tone="muted">Last edited 2 hours ago.</Text>// <Text tag="span" weight="semibold" tone="danger">3 failed</Text>// <Text align="center" size="lg">Nothing here yet.</Text>//// tag: "p" (default), "span", "div" or "small", the element written.// size: "xs", "sm", "md" (default), "lg" or "xl".// weight: "normal", "medium", "semibold" or "bold"; the element's own when not given.// tone: "muted", "accent", "success", "warning", "danger" or "info"; the text colour// when not given. align: "start", "center", "end" or "justify".// italic and mono: in italics, or in the monospace font. id: the element's id.import ui/theme.qwe use ui_clslet text_css = css`.ui-text { margin: 0; font: 15px/1.5 var(--ui-font); color: var(--ui-fg); overflow-wrap: anywhere; }:where(span, small).ui-text { font-size: inherit; line-height: inherit; }.ui-text + .ui-text { margin-top: .6em; }.ui-text-xs { font-size: 12px; }.ui-text-sm { font-size: 13px; }.ui-text-lg { font-size: 17px; }.ui-text-xl { font-size: 20px; line-height: 1.4; }.ui-text-normal { font-weight: 400; }.ui-text-medium { font-weight: 500; }.ui-text-semibold { font-weight: 600; }.ui-text-bold { font-weight: 700; }.ui-text-muted { color: var(--ui-muted); }.ui-text-accent { color: var(--ui-accent); }.ui-text-success { color: var(--ui-success); }.ui-text-warning { color: var(--ui-warning); }.ui-text-danger { color: var(--ui-danger); }.ui-text-info { color: var(--ui-info); }.ui-text-start { text-align: start; }.ui-text-center { text-align: center; }.ui-text-end { text-align: end; }.ui-text-justify { text-align: justify; }.ui-text-italic { font-style: italic; }.ui-text-mono { font-family: var(--ui-mono); font-size: .93em; }`view Text(tag: str = "p", size: str = "md", weight: str? = null, tone: str? = null, align: str? = null, italic: bool = false, mono: bool = false, id: str? = null, class: str? = null, children) { style global text_css let cls = ui_cls(["ui-text", size != "md" && `ui-text-${size}`, weight != null && `ui-text-${weight}`, tone != null && `ui-text-${tone}`, align != null && `ui-text-${align}`, italic && "ui-text-italic", mono && "ui-text-mono", class]) match tag { "span" => <span class={cls} id={id}>{children}</span> "div" => <div class={cls} id={id}>{children}</div> "small" => <small class={cls} id={id}>{children}</small> _ => <p class={cls} id={id}>{children}</p> }}Related
AbbrAn 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 · 6 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 · 7 downloadsDropCapA paragraph whose first letter is set large and dropped into the first two, three or four lines.5 views · 6 downloadsEyebrowA small uppercase label above a heading, in a tone, with an optional dot.6 views · 8 downloads
Thread
Thread 0 posts
On Text: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.