Record — Timeline
Anatomy
Three to five dated milestones for a stay, case or delivery. The caller supplies the order and the distinction between actual events, the current step and scheduled events. The layout is horizontal at viewport widths of at least 48rem, including narrow desktop columns, and vertical below 48rem. The frame sizes to its content.
maud_ui::blocks::record::timeline
Props
Generated from public Rust fields. Defaults are evaluated from the implementation.
| Prop | Type | Default | Description |
|---|---|---|---|
state | crate::blocks::state::State | Ready | Explicit presentation state; Ready preserves the ordinary content. |
title | String | "Timeline" | No description |
heading | Heading | H2 | No description |
milestones | Vec<Milestone> | [] | No description |
Examples
light · fictional example
The stay
- Booked & deposit paid
CAD $280 received
Done - Arrival review
Juniper 04 ready · CAD $560 due
Current - Check out by 11:00
3 nights at the lodge
Scheduled
dark · fictional example
The stay
- Booked & deposit paid
CAD $280 received
Done - Arrival review
Juniper 04 ready · CAD $560 due
Current - Check out by 11:00
3 nights at the lodge
Scheduled
Loading, empty, error and disabled
Each example uses the block’s state prop. Empty and error are separate outcomes.
Usage and composition
Import and example
use maud_ui::blocks::record::timeline::{self, Milestone, Props, State};
timeline::render(Props {
title: "The stay".into(),
milestones: vec![
Milestone { date: "24 Aug".into(), label: "Booked".into(), state: State::Done, ..Default::default() },
Milestone { date: "Today · 11:30".into(), label: "Arrival review".into(), subline: Some("Juniper 04 is ready".into()), state: State::Current, ..Default::default() },
Milestone { date: "11 Sep".into(), label: "Check out".into(), state: State::Scheduled, ..Default::default() },
],
..Default::default()
});
maud_ui::blocks::record::stay_timeline is an alias of this module, including all types and functions.
Milestone fields: date: String and label: String default empty; datetime: Option<String> supplies an optional ISO date/datetime for <time> (otherwise the visible date is a span); subline: Option<String> supplies supporting copy; state: State defaults Scheduled; state_label: Option<String> replaces the visible state label for localization. Optional fields default None. Strings are escaped.
States and helpers
State::{Done, Current, Scheduled}; State::as_str() supplies the lowercase data attribute and State::label() supplies the English text. A timeline may have no current step; passing multiple Current milestones panics to reject ambiguous progress. Dates do not determine states or reorder events.
Related
Record header, money, related entity.
Presentation states (0.10.1)
Props::state: maud_ui::blocks::state::State defaults to Ready. Loading { message } shows skeletons; Empty { message, action } and Error { message, retry } provide distinct recovery paths; Disabled { reason } retains admitted content in an inert subtree with an external reason. Loading, empty and error omit ready content. Inert disables interaction, not server authorization or submission of values by an enclosing form. Each live API page shows all four states together. Add state: Default::default() to exhaustive Props literals.
State::Absent (0.11.0) means no input/rule was declared and emits nothing. Keep any caller-owned section heading inside the same conditional. Use Error only for a declared operation that failed; never show an unconfigured-rule message to the user.
Accessibility
An ordered list, visible state text and a check for Done accompany color. The current step alone has aria-current="step". Markers are decorative. No JavaScript or interactive step navigation; actions belong in the record header. Below a 48rem viewport the same list becomes vertical, retaining reading order in light and dark themes.