Timeline
Component hiển thị chuỗi sự kiện theo thời gian với nhiều variant và kích thước.
Cài đặt
Theo dõi đơn hàng
Timeline theo dõi trạng thái giao hàng.
Đơn hàng đã đặt
Đơn hàng #12345 đã được xác nhận.
10:30 AM — 15/04/2026
Thanh toán thành công
Visa ****4242 — 1,250,000đ
10:31 AM — 15/04/2026
Đang chuẩn bị hàng
Kho Hà Nội đang đóng gói sản phẩm.
02:00 PM — 15/04/2026
Đang vận chuyển
Giao hàng nhanh — dự kiến 17/04/2026.
08:00 AM — 16/04/2026
Chờ giao hàng
Dự kiến 17/04/2026
Git History
Timeline hiển thị lịch sử commit/merge.
Merge PR #42: Add Timeline component
Merged by @huy — 3 files changed, +180 -0
2 giờ trước
Fix: DatePicker locale hardcode
Thêm locale prop, xóa dead code.
3 giờ trước
feat: Command palette component
5 giờ trước
Branch: feature/new-components
Tạo branch mới từ main.
6 giờ trước
Kích thước
Ba kích thước: sm, md, lg.
size=sm
Tạo tài khoản
Xác minh email
Thiết lập hồ sơ
Chờ duyệt
size=md
Tạo tài khoản
Xác minh email
Thiết lập hồ sơ
Chờ duyệt
size=lg
Tạo tài khoản
Xác minh email
Thiết lập hồ sơ
Chờ duyệt
Variants
Mỗi item có thể dùng variant riêng hoặc dùng chung default variant.
variant=default
Bước 1: Khởi tạo
Thiết lập cấu hình ban đầu.
Bước 2: Xử lý
Đang thực hiện tác vụ.
Bước 3: Hoàn tất
variant=primary
Bước 1: Khởi tạo
Thiết lập cấu hình ban đầu.
Bước 2: Xử lý
Đang thực hiện tác vụ.
Bước 3: Hoàn tất
variant=success
Bước 1: Khởi tạo
Thiết lập cấu hình ban đầu.
Bước 2: Xử lý
Đang thực hiện tác vụ.
Bước 3: Hoàn tất
variant=warning
Bước 1: Khởi tạo
Thiết lập cấu hình ban đầu.
Bước 2: Xử lý
Đang thực hiện tác vụ.
Bước 3: Hoàn tất
variant=danger
Bước 1: Khởi tạo
Thiết lập cấu hình ban đầu.
Bước 2: Xử lý
Đang thực hiện tác vụ.
Bước 3: Hoàn tất
API Reference
| Prop | Type | Default | Mô tả |
|---|---|---|---|
items | TimelineItemData[] | — | Mảng các item trong timeline |
size | "sm" | "md" | "lg" | "md" | Kích thước timeline |
variant | string | "default" | Biến thể màu sắc của timeline |