components timeline

components/timeline

Import: import { Timeline } from "@tundralibs/ui/timeline"

Rendered in every variant on the catalogue (deno task build:demos, then demo/index.html). Guides: Getting started · rAPId integration · Theming.

Functions

Timeline

Timeline(props: TimelineProps): Html

Types

TimelineItem

Prop	Type	Required	Description
title	string	yes
meta	string
status	`"done"	"current"	"pending"`

TimelineProps

Prop	Type	Required	Description
id	string
items	TimelineItem[]	yes

Usage

Each example as the rAPId call and the HTML it renders — the markup a plain page writes by hand. Icons are inline SVG in the real output; they are shortened to <svg …>…</svg> here.

An invoice's history

Timeline({
  items: [
    { title: "Sent", meta: "1 Sep", status: "done" },
    { title: "Reminder sent", meta: "15 Sep", status: "done" },
    { title: "Payment due", meta: "1 Oct", status: "current" },
  ],
})

<ol class="timeline">
  <li class="timeline__item timeline__item--done">
    <span class="timeline__rail">
      <span class="timeline__marker">
        <svg width="12" height="12" width="2" …>…</svg>
      </span>
      <span class="timeline__line"></span>
    </span>
    <span class="timeline__body">
      <span class="timeline__title">Sent</span>
      <span class="timeline__meta">1 Sep</span>
    </span>
  </li>
  <li class="timeline__item timeline__item--done">
    <span class="timeline__rail">
      <span class="timeline__marker">
        <svg width="12" height="12" width="2" …>…</svg>
      </span>
      <span class="timeline__line"></span>
    </span>
    <span class="timeline__body">
      <span class="timeline__title">Reminder sent</span>
      <span class="timeline__meta">15 Sep</span>
    </span>
  </li>
  <li class="timeline__item timeline__item--current">
    <span class="timeline__rail">
      <span class="timeline__marker"></span>
      <span class="timeline__line"></span>
    </span>
    <span class="timeline__body">
      <span class="timeline__title">Payment due</span>
      <span class="timeline__meta">1 Oct</span>
    </span>
  </li>
</ol>

CSS hooks

Classes defined by components/timeline/timeline.css — structural, token-driven; override from an unlayered stylesheet (see Theming):

.timeline, .timeline__body, .timeline__item, .timeline__item--current, .timeline__item--done, .timeline__item--pending, .timeline__line, .timeline__marker, .timeline__meta, .timeline__rail, .timeline__title