Yugen UI

Timeline

Timeline liệt kê các sự kiện theo thời gian: lịch sử đơn hàng, nhật ký hoạt động, các bước đã qua của một yêu cầu.

Timeline là một <ol>; mỗi TimelineItem có tiêu đề, thời gian, icon (hoặc Avatar) và nội dung thêm tuỳ chọn. Truyền dateTime để thời gian thành thẻ <time> máy đọc được. variant compact dùng chấm nhỏ và một dòng cho mỗi sự kiện, hợp với nhật ký dài. Icon chỉ để trang trí, nên tiêu đề phải tự nói đủ sự kiện.
  1. Đang giao hàng
    Giao Hàng Nhanh · mã vận đơn GHN-5520417
  2. Đã đóng gói
  3. Đã thanh toán
  4. Trần Thị Bình đã đặt đơn #2041

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX
// npm install yugen-uiimport { Timeline, TimelineItem } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

  1. Cường đã đổi trạng thái sang Hoàn thành
    10 phút trước
  2. Dũng đã bình luận
    1 giờ trước
    “Mình đã cập nhật số liệu quý 3, nhờ mọi người xem lại.”
  3. Dũng đã tải lên bao-cao-q3.pdf
    1 giờ trước
  4. Bình đã thêm 2 thành viên
    Hôm qua

Compact

Chấm nhỏ, tiêu đề và thời gian trên một dòng; nội dung thêm dùng chữ caption.

  1. Triển khai v2.4.1 thất bại
    14:02
    Kiểm tra sức khoẻ không đạt sau 3 lần thử; đã quay về v2.4.0.
  2. Thời gian phản hồi tăng 30%
    13:48
  3. Đã triển khai v2.4.0
    Hôm qua
  4. Đã tạo môi trường staging
    20/10

Intent không icon

Không có icon thì là chấm tròn theo intent: neutral, brand, success, warning, error.

Cách dùng

Nên
  • Xếp sự kiện mới nhất lên đầu, trừ khi người dùng đang theo dõi một quy trình từ đầu đến cuối.
  • Viết tiêu đề đủ ý (ai, làm gì) vì icon không được đọc cho trình đọc màn hình.
  • Truyền dateTime khi thời gian hiển thị là tương đối (“2 giờ trước”).
Không nên
  • Không dùng Timeline cho các bước chưa xảy ra mà người dùng phải đi qua — dùng Stepper.
  • Không dùng intent chỉ để trang trí; giữ màu cho trạng thái thật sự khác.

Props

Prop · KiểuMặc địnhMô tả
variant"detailed" | "compact"Mặc định: "detailed"detailed: ô icon 32px, nội dung bên dưới · compact: chấm nhỏ, một dòng.
TimelineItem.titleReactNodeMặc định: —Sự kiện: ai làm gì.
TimelineItem.timeReactNodeMặc định: —Thời gian hiển thị.
TimelineItem.dateTimestringMặc định: —Thời điểm ISO 8601 → thẻ <time dateTime>.
TimelineItem.iconReactNodeMặc định: —Icon hoặc Avatar; bỏ trống = chấm tròn.
TimelineItem.intent"neutral" | "brand" | "success" | "warning" | "error"Mặc định: "neutral"Màu ô icon / chấm. Giá trị cũ "danger" đã lỗi thời (bỏ ở 1.0).
TimelineItem.childrenReactNodeMặc định: —Nội dung thêm: bình luận, tệp, thẻ.