Gauge

Playground

Khi nào sử dụng

Nên dùng

Một tỉ lệ đã biết, đặt cạnh vài dòng thống kê. Ví dụ hoạt động chiếm bao nhiêu phần trên hồ sơ.

Tránh dùng

Thanh tiến độ của một việc có điểm kết thúc thì dùng Progress. Giá trị người dùng tự đặt thì dùng Slider.

Anatomy

Vòng nền dùng surface-subtle. Cung giá trị dài 75% chu vi, xoay 135° để hở đáy. Hai đầu bo tròn. Số ở giữa là phần trăm đã làm tròn.

States

0 chỉ còn vòng nền. 100 phủ hết cung nhưng vẫn hở đáy. max khác 100 vẫn hiện phần trăm, không hiện số thô.

Accessibility

role="meter", aria-valuemin 0, aria-valuemax 100, aria-valuenow là phần trăm. Không nhận tiêu điểm. Số vẽ trên vòng bị ẩn khỏi cây trợ năng.

Design tokens

Không token mới. Nền là surface-subtle. Cung information là status-information-border. Cung primary là action-primary-background. Số là text-primary.

API & triển khai