EmptyState
What a list or page shows when there is nothing in it yet, with an icon and what to do next.
Demo
No messages yet
When someone writes to you, it shows up here.
No results for “invoice 42”
Try fewer words.
This folder is empty
No data for March
Sales show up a day after they happen.
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/empty_state.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/empty_state.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/empty_state.qwe
view EmptyStateDemo() = <div.demo-stack> <EmptyState icon="inbox" title="No messages yet" actions={[<Button>Write a message</Button>, <Button variant="outline">Import contacts</Button>]}> When someone writes to you, it shows up here. </EmptyState> <div.demo-row> <EmptyState size="sm" icon="search" title="No results for “invoice 42”" actions={<Button size="sm" variant="ghost">Clear the search</Button>}> Try fewer words. </EmptyState> <EmptyState size="sm" icon="folder" title="This folder is empty"/> <EmptyState size="sm" icon="chart" title="No data for March">Sales show up a day after they happen.</EmptyState> </div> </div>Source
ui/empty_state.qwe
// EmptyState: what to show where a list or a page has nothing in it yet, and// what to do about it.//// <EmptyState icon="inbox" title="No messages yet">// When someone writes to you, it shows up here.// </EmptyState>// <EmptyState icon="search" title="No results for “invoice 42”"// actions={<Button variant="outline" href="?">Clear the search</Button>}>// Try fewer words, or check the spelling.// </EmptyState>//// icon: "inbox" (default), "search", "folder", "chart", or null for none.// title: the headline. children: a sentence or two under it.// actions: HTML under the text, usually a Button or two.// size: "sm" (for inside a card or a table) or "md" (default). Centred by default;// align="start" lines it up on the left.import ui/theme.qwe use ui_clslet empty_state_css = css`.ui-empty { display: grid; justify-items: center; gap: 6px; padding: 40px 24px; text-align: center; font: 14px/1.5 var(--ui-font); color: var(--ui-muted); }.ui-empty-start { justify-items: start; text-align: left; }.ui-empty-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; border-radius: 50%; background: var(--ui-subtle); color: var(--ui-muted); }.ui-empty-icon svg { width: 26px; height: 26px; }.ui-empty-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--ui-fg); }.ui-empty-text { max-width: 42ch; }.ui-empty-text > * { margin: 0; }.ui-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }.ui-empty-start .ui-empty-actions { justify-content: flex-start; }.ui-empty-sm { padding: 24px 16px; }.ui-empty-sm .ui-empty-icon { width: 44px; height: 44px; }.ui-empty-sm .ui-empty-icon svg { width: 20px; height: 20px; }.ui-empty-sm .ui-empty-title { font-size: 15px; }`// The built-in icons, drawn in currentColor on a 24 by 24 grid.fn empty_state_icon(name: str) { let parts = match name { "search" => [<circle cx="11" cy="11" r="6.5"/>, <path d="M16 16l4.5 4.5"/>] "folder" => [<path d="M3.5 7.5a2 2 0 0 1 2-2h4l2 2.5h7a2 2 0 0 1 2 2v7.5a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z"/>] "chart" => [<path d="M4 20h16"/>, <path d="M7 16v-4M12 16V7M17 16v-6"/>] _ => [<path d="M3.5 13.5l2.6-7.1a2 2 0 0 1 1.9-1.4h8a2 2 0 0 1 1.9 1.4l2.6 7.1v4a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z"/>, <path d="M3.5 13.5h4.5l1.5 2.5h5l1.5-2.5h4.5"/>] } <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{parts}</svg>}view EmptyState(title: str, icon: str? = "inbox", actions = null, size: str = "md", align: str = "center", class: str? = null, children) { style global empty_state_css <div class={ui_cls(["ui-empty", size != "md" && `ui-empty-${size}`, align == "start" && "ui-empty-start", class])}> {icon != null && <div.ui-empty-icon>{empty_state_icon(icon)}</div>} <p.ui-empty-title>{title}</p> <div.ui-empty-text>{children}</div> {actions != null && <div.ui-empty-actions>{actions}</div>} </div>}Related
BannerAn announcement across the top of the page in six tones, with a link, closed for the session once dismissed.7 views · 6 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 downloadsResultPageA whole page that says how something ended: an icon for the outcome, a title, text and what to do next.5 views · 4 downloadsAlertA 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 downloadsCoachmarkA small callout pointing at an element by id, explaining it once, dismissed with Got it; several make a tour.6 views · 8 downloads
Thread
Thread 0 posts
On EmptyState: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.