组件 · 任务
Timeline
An ordered list of what happened — a task's history in task-status colors and plain words, or an agent's activity log in presence colors and Space Mono.
import { Timeline } from "@botiverse/raft-ui";A Timeline lists what happened, in order. Each step is a status pixel on a hairline, with its title and its time. It has two uses: a task's History, in the colors of the task statuses and in plain words, and an agent's activity log, in the colors of the presence lights and in Space Mono.
When to use
| Situation | Use |
|---|---|
| A task's History, collapsed under its properties in task details | Timeline (Built from existing parts) |
| What an agent did (Hand-offs and approvals) | Timeline, as an activity log |
| The steps of a flow the person goes through | Steps |
| Facts about an item, not events | DescriptionList |
| Messages and event lines in a conversation | SystemMessage in the conversation (Conversation) |
Anatomy
Timeline: the ordered list. Required.TimelineItem: one step, with its marker and the line to the next step. Required.TimelineTitle: what happened. Required.TimelineContent: a detail line in Space Mono: a commit, a file count. Optional.TimelineTime: when, in Space Mono, at the right end of the first line. Optional.
Only the title and the time share the first line. A detail below them runs the full width of the item: the time reserves its column for that first line alone, so holding the detail beside it would narrow the detail by a time it never sits next to — on a phone, most of the row. An item with no title keeps its one line, where the detail does sit beside the time.
A long title and a long time still compete on the first line, because a time does not wrap. Keep a time short where the column is narrow.
Variants
| Variant | Use for |
|---|---|
Task history: taskStatus on each item | The pixel is the task's status after that step, in its task-status-* color |
Activity log: color (or variant) on each item | The pixel takes the colors of the presence lights: presence-busy (yellow) while working, presence-error (orange) for an error, lime (success) when done |
icon on an item | An icon in place of the pixel, in the item's color, for a step that needs one |
itemPlacement="right" | Markers on the right, text aligned to them |
horizontal | A short sequence of milestones in a row |
Content
Task history
- Write each title as who did what, with the name in bold: "Bugen claimed it", "Bugen moved it to In Review".
- Put the evidence in the detail line: "commit c41e09 · 4 files changed".
Activity log
- Set the title and the detail in Space Mono: the log is what a machine wrote (Typography).
- Mark a step done by a subagent with a
subagenttag. - Write only what the agent did. Don't show its prompts or its output.
Accessibility
Timelinerenders a nativeoland eachTimelineItemanli, so the order and the number of steps are announced. raft-ui adds no Base UI primitive.- The marker and the line are hidden from assistive technology. When the color carries meaning, say it in the title too: "moved it to In Review", "failed: CI".
Rules
- Don't make a timeline clickable. To go to the object of a step, link that object in the title: the task, the commit, the file.
- Mark a step that failed in orange (
warning, orpresence-errorin a log), notdanger: red is only for consequences that cannot be undone (Color).
API
Timeline
| Prop | 类型 | 默认值 |
|---|---|---|
| Lays the items out in a row instead of a column. | boolean | false |
| Marker size in px. Defaults to 9px for the marker and 14px for an `icon`. | number | |
| Which side the markers sit on in a vertical timeline. Ignored when `horizontal`. | TimelineItemPlacement | "left" |
| Title size: `lg` opens the title to 16/24; `sm` and `md` share the 14/20 scale. | TimelineSize | "md" |
Also takes the attributes of its element.
TimelineContent
接受其元素的全部属性。
TimelineItem
| Prop | 类型 | 默认值 |
|---|---|---|
| A custom marker color; overrides `variant`. | string | |
| Replaces the dot marker; takes the variant's color. | ReactNode | |
| The line from this item to the next. | TimelineLineType | "solid" |
| Render the marker from a task status's colour token instead of a generic `variant`. Takes precedence over `variant`; `color` still wins when both are set. Omit it and the item behaves exactly as before. | TaskStatusId | |
| Marker color role. | TimelineItemVariant | "default" |
Also takes the attributes of its element.
TimelineTime, TimelineTitle
接受其元素的全部属性。
相关组件
改动
- 0.10.0 · Changed
Tooltip,ComboboxSelectoptions,StepsandTimelineuse the type scale instead of fixed sizes, so they follow the desktop values. - 0.5.30 · AddedAdded the
taskStatusprop onTimelineItem, which paints the marker from the status colour. Omitting it leaves the item unchanged.