Sách Đêm

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: md · note: Nút chính màu đèn hổ phách trên nền đêm; loading = quầng đèn nhấp nháy; done = dấu tích nét mự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: md · note: Nút chính màu đèn hổ phách trên nền đêm; loading = quầng đèn nhấp nháy; done = dấu tích nét mự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: md · note: Nút chính màu đèn hổ phách trên nền đêm; loading = quầng đèn nhấp nháy; done = dấu tích nét mự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 thể loại sách, chọn bàn, chọn buổi câu lạc bộ

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
Cú Thức
Đêm còn dài, mình đọc thêm một chương nhé.

types: info/tip/success/warning/danger · character: true · note: Lời nhân vật: Cú Thức gợi ý sách, Mèo Mực nhắc trả sách

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: Đố vui sách?

Đố vui về quán và câu lạc bộ: chọn đáp án, kiểm tra, nhận kết quả.

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: đúng/chưa đúng · stamp: dấu thư viện tròn · example: Đúng rồi — hẹn bạn tối thứ Tư lúc 19:30

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 đi cùng · help: Mỗi bàn đèn tối đa 4 người · error: Bàn này chỉ còn 2 chỗ — ví dụ: nhập 1 hoặc 2

Tiến độ

Thanh

Thử thách 30 đêm · 12/30

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 thẻ/Đọc tại chỗ/Vào câu lạc bộ/Lên đọc thơ · example: Hành trình thành viên Sách Đêm