Timeline

A list that shows events in time order.

VerifiedSince 0.3.4

Usage

Basic

color sets each dot's semantic tone.

Loading demo...

Admin Audit Flow

In a permission orchestration panel, the timeline records authorization steps and active marks the current one.

Loading demo...

Best Practices

Put the status in title or the slot text; use color only as reinforcement.
Mark exactly one current event active in a step-by-step flow.
Use layout="horizontal" for short milestone sequences; keep audit logs and long histories vertical.
Keep time short and consistently formatted within one timeline.
In dense timelines, give an icon only to exceptional or key states.

API Reference

TxTimeline

Props

Property	Type	Default	Description
layout			Layout direction, shared with every item.

Slots

Slot	Props	Description
`default`	-	Timeline items.

TxTimelineItem

Props

Property	Type	Default	Description
title		-	Item title.
time		-	Time label.
color			Semantic tone of the dot.
icon		-	Dot icon.
active			Highlights the current event's item and dot.

Slots

Slot	Props	Description
`default`	-	Event description below the title and time.

Overview

TxTimeline is a role="list", and each TxTimelineItem a role="listitem".
layout reaches the items through provide / inject, so items never set it themselves.
The dot and its icon are aria-hidden; screen readers get only the title, time, and description.

Technologies

Source: packages/tuffex/packages/components/src/timeline/.

packages/tuffex/packages/components/src/timeline/index.ts