InlineMessage
A small one-line message with an icon for its tone (info, success, warning, error), to sit in a form or beside a control.
Demo
Changes are saved as you typeUsername is availableYour trial ends in 2 daysThat email is already in use
Letters, numbers and dashes.
ada is available
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/inline_message.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/inline_message.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/inline_message.qwe
view InlineMessageDemo() = <div.demo-stack> <div.demo-row style="gap: 20px"> <InlineMessage id="inline-message-demo-info">Changes are saved as you type</InlineMessage> <InlineMessage id="inline-message-demo-ok" tone="success">Username is available</InlineMessage> <InlineMessage id="inline-message-demo-warn" tone="warning">Your trial ends in 2 days</InlineMessage> <InlineMessage id="inline-message-demo-err" tone="error">That email is already in use</InlineMessage> </div> <div.demo-row style="gap: 20px"> <InlineMessage tone="neutral" size="sm">Last synced 4 minutes ago</InlineMessage> <InlineMessage tone="success" size="sm" icon={false}>Copied</InlineMessage> <InlineMessage tone="info" size="sm">Read the <a href="#inline_message">export guide</a></InlineMessage> </div> <div.demo-narrow> <TextField name="handle" field="inline-message-demo-handle" label="Username" value="ada" hint="Letters, numbers and dashes."/> <div style="margin-top: 6px"><InlineMessage tone="success" size="sm">ada is available</InlineMessage></div> </div> </div>Source
ui/inline_message.qwe
// InlineMessage: a small one-line message with an icon for its tone, in the line// of a form or beside a control: a hint that something went well or needs a look.//// <InlineMessage tone="success">Username is available</InlineMessage>// <InlineMessage tone="error">That email is already in use</InlineMessage>// <InlineMessage tone="warning" size="sm">Expires in 2 days</InlineMessage>//// tone: "info" (default), "success", "warning", "error" (or "danger") or// "neutral". Warnings and errors are announced at once (role="alert"), the rest// politely (role="status"). size: "sm" or "md" (default). icon: false leaves the// icon out. id: the element's id, for aria-describedby on a field.import ui/theme.qwe use ui_clslet inline_message_css = css`.ui-imsg { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font: 13px/1.4 var(--ui-font); color: var(--t); --t: var(--ui-info); }.ui-imsg-neutral { --t: var(--ui-muted); }.ui-imsg-success { --t: var(--ui-success); }.ui-imsg-warning { --t: var(--ui-warning); }.ui-imsg-error { --t: var(--ui-danger); }.ui-imsg-sm { font-size: 12px; gap: 5px; }.ui-imsg-icon { flex: none; width: 16px; height: 16px; }.ui-imsg-sm .ui-imsg-icon { width: 14px; height: 14px; }.ui-imsg-text { min-width: 0; }.ui-imsg a { color: inherit; font-weight: 500; text-underline-offset: 2px; }`// The icon for each tone, drawn in currentColor.fn inline_message_icon(tone: str) { let mark = match tone { "success" => <path d="M5.5 8.5l2 2 3.5-4"/> "warning" => <path d="M8 5.5v3.5M8 11.5h.01"/> "error" => <path d="M6 6l4 4M10 6l-4 4"/> _ => <path d="M8 7.5v4M8 5h.01"/> } let shape = tone == "warning" ? <path d="M6.9 2.6L1.9 11.4a1.3 1.3 0 0 0 1.1 1.9h10a1.3 1.3 0 0 0 1.1-1.9L9.1 2.6a1.3 1.3 0 0 0-2.2 0z"/> : <circle cx="8" cy="8" r="6"/> <svg class="ui-imsg-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{shape}{mark}</svg>}view InlineMessage(tone: str = "info", size: str = "md", icon: bool = true, id: str? = null, class: str? = null, children) { style global inline_message_css let t = tone == "danger" ? "error" : tone <span class={ui_cls(["ui-imsg", `ui-imsg-${t}`, size != "md" && `ui-imsg-${size}`, class])} id={id} role={t == "error" || t == "warning" ? "alert" : "status"}> {icon && inline_message_icon(t)} <span.ui-imsg-text>{children}</span> </span>}Related
AlertA message in the page in six tones and three variants, with an icon, announced to screen readers, and dismissable.5 views · 9 downloadsBadgeA small pill for a status or a count: six tones, soft, solid or outline, a status dot, and 99+.8 views · 6 downloadsConnectionStatusSays when the browser goes offline, as a bar across the top or a pill, and that it is back online for a moment.6 views · 7 downloadsErrorPageA 404 or 500 page: the code large, what it means, a search box if wanted, and links to go on from.5 views · 6 downloadsLoadingDotsThree dots bouncing in turn, inline, for something short that is on its way; screen readers hear the label.5 views · 6 downloadsLoadingOverlayCovers its content with a spinner and a message while something is busy, keeping the content in place but out of reach.5 views · 5 downloads
Thread
Thread 0 posts
On InlineMessage: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.