Timeline

Usage

Timeline

Highlight recent updates.

Best Practices

• Put the durable status in title or slot text; use color only as a visual reinforcement.
• Mark exactly one current event with active in step-by-step flows.
• Use layout="horizontal" for short milestone sequences; keep audit logs and long histories vertical.
• Keep time concise and consistently formatted across items.
• Use icon sparingly. Dense timelines are more readable when only exceptional states get icons.

API Reference

Props

TxTimelineItem Props

Slots

Events

TxTimeline and TxTimelineItem do not emit events.

Admin Audit Flow

TxTimeline works well for authorization, release, sync, and other admin task event streams. Use active to highlight the current step and treat color as a semantic aid only; the important state should still be present in title or slot text.

Overview

• TxTimeline exposes role="list" and each TxTimelineItem exposes role="listitem".
• active applies to both the item and dot, highlighting the current event.
• layout="horizontal" is provided to child items through context, switching the event stream to a horizontal layout.

Technologies

• Source: packages/tuffex/packages/components/src/timeline/src/TxTimeline.vue confirms role="list", vertical/horizontal layout class resolution, and context provided to child items.
• Item source: packages/tuffex/packages/components/src/timeline/src/TxTimelineItem.vue confirms role="listitem", title/time/default-slot rendering, optional icon rendering, semantic dot color classes, active item/dot classes, and injected layout classes.
• Type contracts: packages/tuffex/packages/components/src/timeline/src/types.ts defines layout and item color unions plus component prop contracts.
• Verified coverage: Coverage: packages/tuffex/packages/components/src/timeline/__tests__/timeline.test.ts covers list semantics, default vertical layout, horizontal layout injection, title/time/default slot/icon rendering, semantic color class, and active item/dot state.
• Recommendation: mark the current event with active; keep color within 'default' | 'primary' | 'success' | 'warning' | 'error' and avoid undefined semantic tones.