Vườn Số

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

Ba cỡ

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

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

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 luống, loại cây, khung giờ tưới

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
Mầm
Đo trước, tưới sau — luống nào khát mình chỉ cho!

types: info/success/warning/danger/tip · character: true · characterNote: Hộp lời nhân vật: Mầm cho mẹo canh tác, Phun cho nhắc tưới, Tơi cho số đo đấ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

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: Hỏi nhanh · luống cải?

Câu hỏi nhanh về tưới theo số đo: chọn cách làm, 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: đủ ẩm/cần tưới/dư nước · 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: Vườn Số nhắn lịch tưới mỗi sáng qua số này · error: Số chưa đủ 10 chữ số — ví dụ: 0912 345 678

Tiến độ

Thanh

Vụ cải đông · tuần 3 · 3/8

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/Tự đo/Tự động