Trà Sương

07 · Component

Bấm vào thấy có lực

Mọi demo chỉ dùng token của design-system.json — đổi theme, component tự đổi theo.

Nút

Tối đa 1 nút nhấn mạnh nhất mỗi trang. Vùng chạm ≥ 44 px.

Bốn cấp

interactive: true · levels: primary/secondary/ghost/danger · sizes: sm/md/lg · states: default/hover/focusVisible/active/disabled/loading/done · emphasisMaxPerPage: 1 · radius: full · note: Nút chính màu lá trà; loading = vòng hơi nước quay; done = dấu tích nét cọ

Ba cỡ

interactive: true · levels: primary/secondary/ghost/danger · sizes: sm/md/lg · states: default/hover/focusVisible/active/disabled/loading/done · emphasisMaxPerPage: 1 · radius: full · note: Nút chính màu lá trà; loading = vòng hơi nước quay; done = dấu tích nét cọ

Trạng thái

Bấm để xem đang gửi → đã xong.

interactive: true · levels: primary/secondary/ghost/danger · sizes: sm/md/lg · states: default/hover/focusVisible/active/disabled/loading/done · emphasisMaxPerPage: 1 · radius: full · note: Nút chính màu lá trà; loading = vòng hơi nước quay; done = dấu tích nét cọ

Chip lựa chọn

Bạn quan tâm điều gì trước?

interactive: true · states: default/hover/focusVisible/active/disabled · use: lọc loại trà, chọn lịch workshop

Hộp thông tin

Dải màu bên trái cho biết loại tin. Hộp lời nhân vật dùng khi cần giọng ấm thay cho thông báo khô.

info
tip
success
warning
danger
Ấm Sương
Từ từ thôi bạn, bốn phút là trà ngọt hậu.

types: info/tip/success/warning/danger · character: true · note: Lời nhân vật: Ấm Sương nói mẹo pha, Lá Non nhắc nhiệt độ

Phản hồi

Thông báo nổi (toast)

Thanh đếm giờ ở đáy, rê vào thì dừng.

interactive: true · states: default/hover/focusVisible/active/disabled · timerMs: 5000 · pauseOnHover: true · ariaLive: polite

Hộp thoại

Rèm mờ, giữ tiêu điểm bên trong, Esc để đóng, trả tiêu điểm về nút mở.

Bắt đầu: Câu đố trà · Shan tuyết?

Câu đố pha trà từng bước: chọn đáp án, kiểm tra, xem giải thích.

interactive: true · states: default/hover/focusVisible/active/disabled · escCloses: true · returnsFocus: true

Thanh phán quyết

Trượt lên sau mỗi câu trả lời, có con dấu.

kinds: ngon/cần chỉnh · stamp: con dấu tròn nét cọ · example: Ấm này ngọt hậu — giữ 85 °C lần sau

Nhập liệu

Nhãn luôn hiện, gợi ý bên dưới, lỗi nói cách sửa và có ví dụ.

Tên chúng tôi dùng để gọi bạn.

interactive: true · states: default/hover/focusVisible/active/disabled · label: Số người tham gia · help: Mỗi lớp tối đa 8 người · error: Lớp chỉ còn 3 chỗ — ví dụ: nhập 2 hoặc 3

Tiến độ

Thanh

Buổi 2 · Shan tuyết · 2/4

Bậc

  1. Bước 1
  2. Bước 2
  3. Bước 3
  4. Bước 4
  5. Bước 5

Vòng

72%

Chuỗi ngày

  1. T2
  2. T3
  3. T4
  4. T5
  5. T6
  6. T7
  7. CN

Lộ trình

steps: Làm quen/Pha trà xanh/Pha Shan tuyết/Ướp trà sen · example: Lộ trình 4 buổi workshop