Quillo.qweComponents

Data

Timeline

What happened, in order, down a line of coloured dots, as an <ol> with <time> elements.

#data#list#time#no-js

Preview
  1. Order placed

    3 items, $214.00

  2. Payment received
  3. Shipped

    UPS, tracking 1Z999AA10123456784

  4. Delivery attempt failed

    Nobody was home. They will try again tomorrow.

  5. Delivered
  1. v0.9.0 released
  2. Build failed on main

    tests/lang.rs: 1 failure

  3. Ada joined the project
Download timeline.qwetheme.qweOn GitHub

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/timeline.qwe
main.qwe
import ui/theme.qwe use theme_cssuse ui/timeline.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>

Example

The code of the preview above.

demos/timeline.qwe
view TimelineDemo() =    <div.demo-row style="align-items: flex-start; gap: 40px">        <div.demo-narrow.demo-wide>            <Timeline items={[                { title: "Order placed", time: "Mar 3, 09:12", datetime: "2026-03-03T09:12", body: "3 items, $214.00" },                { title: "Payment received", time: "Mar 3, 09:13", datetime: "2026-03-03T09:13", tone: "success" },                { title: "Shipped", time: "Mar 4, 16:40", datetime: "2026-03-04T16:40", tone: "accent",                  body: "UPS, tracking 1Z999AA10123456784" },                { title: "Delivery attempt failed", time: "Mar 6, 11:05", datetime: "2026-03-06T11:05", tone: "warning",                  body: "Nobody was home. They will try again tomorrow." },                { title: "Delivered", time: "Mar 7, 10:20", datetime: "2026-03-07T10:20", tone: "success" },            ]}/>        </div>        <div.demo-narrow.demo-wide>            <Timeline items={[                { title: "v0.9.0 released", time: "2 days ago", tone: "info" },                { title: "Build failed on main", time: "5 days ago", tone: "danger", body: "tests/lang.rs: 1 failure" },                { title: "Ada joined the project", time: "last week" },            ]}/>        </div>    </div>

Source

ui/timeline.qwe
// Timeline: what happened, in order, down a line of dots: an order's history, a// changelog, an activity feed.////   <Timeline items={[//       { title: "Order placed", time: "Mar 3, 9:12", datetime: "2026-03-03T09:12" },//       { title: "Payment received", time: "Mar 3, 9:13", tone: "success" },//       { title: "Shipped", time: "Mar 4", body: "UPS 1Z999AA10123456784", tone: "accent" },//   ]}/>//// items: a list of { title, time, body?, tone?, datetime? }, in the order to show// them. time: when, as it should read ("2 hours ago"); datetime: the same in ISO// form for machines (<time datetime>), when time is not. body: a line or two of// detail. tone: the dot's colour, "neutral" (default), "accent", "success",// "warning", "danger" or "info". It is an <ol>, so screen readers count the steps.import ui/theme.qwe use ui_clslet timeline_css = css`.ui-timeline { margin: 0; padding: 0; list-style: none; font: 14px/1.5 var(--ui-font); color: var(--ui-fg); }.ui-timeline-item { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding-bottom: 18px;  --t: var(--ui-strong); }.ui-timeline-item:last-child { padding-bottom: 0; }.ui-timeline-item::before { content: ""; position: absolute; left: 10px; top: 18px; bottom: -2px; width: 2px;  border-radius: 1px; background: var(--ui-border); }.ui-timeline-item:last-child::before { display: none; }.ui-timeline-dot { width: 12px; height: 12px; margin: 5px 0 0 5px; border-radius: 50%; background: var(--ui-surface);  border: 2.5px solid var(--t); }.ui-timeline-accent { --t: var(--ui-accent); }.ui-timeline-success { --t: var(--ui-success); }.ui-timeline-warning { --t: var(--ui-warning); }.ui-timeline-danger { --t: var(--ui-danger); }.ui-timeline-info { --t: var(--ui-info); }.ui-timeline-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }.ui-timeline-title { font-weight: 600; }.ui-timeline-head time { color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }.ui-timeline-body { margin: 2px 0 0; color: var(--ui-muted); }`view Timeline(items: list, class: str? = null) {    style global timeline_css    <ol class={ui_cls(["ui-timeline", class])}>        {for it in items => <li class={ui_cls(["ui-timeline-item", it.tone != null && `ui-timeline-${it.tone}`])}>            <span.ui-timeline-dot aria-hidden="true"></span>            <div>                <div.ui-timeline-head>                    <span.ui-timeline-title>{it.title}</span>                    {it.time != null && <time datetime={it.datetime}>{it.time}</time>}                </div>                {it.body != null && <p.ui-timeline-body>{it.body}</p>}            </div>        </li>}    </ol>}
ActivityFeedA stream of what people did, with their pictures, an icon for each kind of action, when, quotes and day headings.datalistsocialtimeno-js5 views · 7 downloadsChangelogReleases with version, date and label, their changes grouped by kind: Added, Changed, Fixed, Security and the rest.datalistdocumentno-js6 views · 7 downloadsDataListRecords as rows with a title, a line of facts, a status badge and actions as links or buttons.datalistrecord6 views · 8 downloadsDescriptionListTerms and their details, stacked or in two columns that stack on phones, on a real <dl>.datarecordlistno-js5 views · 7 downloadsFileListFiles as a table or a grid, with kind icons, sizes and dates, sorted, picked, downloaded or deleted.filelistdatano-js7 views · 6 downloadsKanbanBoardColumns of cards moved by dragging, by keyboard (Space, the arrows, Space) or with each card's arrows.datadraglistinteractive9 views · 6 downloads
Thread
67Useful? Like it, or add to its thread below.

Thread 0 posts

On Timeline: questions, tips, corrections, and code that uses it.

No posts yet. The first one opens the thread.