Timeline
Displays a list of events in chronological order.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Timeline />
When to Use
- Activity feeds showing user actions or system events
- Event history logs such as order tracking or audit trails
- Changelogs and release notes displayed chronologically
- Process tracking where each stage has a timestamp
Order placed
Your order has been placed successfully.
Jan 1, 2025
Processing
Your order is being processed.
Jan 2, 2025
Shipped
Your order has been shipped via express.
Jan 3, 2025
Delivered
Your order has been delivered.
Jan 5, 2025
Account created
Welcome to the platform.
9:00 AM
Profile updated
Added profile picture and bio.
10:30 AM
First post
Published your first article.
2:00 PM
Order placed
Your order has been placed.
Jan 1, 2025
Processing
Your order is being processed.
Jan 2, 2025
Shipped
Shipped via express.
Jan 3, 2025
Delivered
Has been delivered.
Jan 5, 2025
Step 1
Planning
Step 2
Design
Step 3
Development
Step 4
Launch
Switch orientation to compare vertical and horizontal layouts.
Planning
Scope defined
Jan 1
Design
Wireframes approved
Jan 8
Development
Sprint in progress
Jan 15
Launch
Shipped to production
Feb 1
Requirements
Gathered and approved.
Week 1
Design
Wireframes signed off.
Week 2
Development
Feature branch in progress.
Week 3
QA
Test suite running.
Week 4
Release
Deployed to production.
Week 5
Active: step 2 of 5
Clicking Next / Previous advances or retreats the active step. ActiveIndexChanged fires on each change and updates the status line below.
Order placed
Your order has been placed.
Jan 1, 2025
Processing
Your order is being processed.
Jan 2, 2025
Shipped
Shipped via express.
Jan 3, 2025
Delivered
Has been delivered.
Jan 5, 2025
Active dot pulses at ActiveIndex; earlier items fill in as completed, connectors draw in.