Gió Vợt

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: gust

Ba cỡ

interactive: true · levels: primary/secondary/ghost/danger · sizes: sm/md/lg · states: default/hover/focusVisible/active/disabled/loading/done · emphasisMaxPerPage: 1 · radius: gust

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: gust

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 trình độ, khung giờ

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
success
warning
danger
tip
Lửa
Cầu rơi thì nhặt lên — ván sau mình bay cao hơn!

types: info/success/warning/danger/tip · character: true · characterNote: Hộp lời nhân vật: Lửa cho mẹo, Sẻ cho nhắc lị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

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: Vững cú · Câu hỏi luật?

Câu hỏi nhanh về luật và kỹ thuật: 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.

variants: vững/cần sửa/thử lại · stamp: true

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ố điện thoại · help: Gió Vợt nhắn mã giữ sân qua số này · error: Số chưa đủ 10 chữ số — ví dụ: 0912 345 678

Tiến độ

Thanh

Lớp Vững cú · Lốp cuối sân · 7/12

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/Vững cú/Thi đấu