Spin
SpinButton cho phép nhập số và tăng/giảm theo bước bằng nút hoặc bàn phím.
Hai nút mũi tên xếp chồng bên phải (nhấn giữ để chạy liên tục). Bàn phím: ↑/↓ theo step, PageUp/PageDown theo stepPage, Home/End về min/max, Enter để xác nhận số vừa gõ. Giá trị luôn được kẹp trong [min, max].
Import
Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.
TSX
// npm install yugen-uiimport { SpinButton } from "yugen-ui";Biến thể
Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.
Bước thập phân
step={0.1}: số chữ số thập phân suy ra từ step.
Định dạng hiển thị
formatValue thêm đơn vị; khi gõ, ký tự không phải số được bỏ qua.
Phòng cho 2 khách
Controlled
value / onValueChange (null khi ô trống).
Appearance, kích thước & disabled
outline, underline, filled-darker, filled-lighter; size small / medium.
Cách dùng
Nên
- Dùng cho số nhỏ, thay đổi theo bước nhỏ (số lượng, số khách, cỡ chữ).
- Luôn đặt min/max hợp lý để tránh giá trị vô nghĩa.
- Hiển thị đơn vị bằng formatValue thay vì ghi trong nhãn khi phù hợp.
Không nên
- Không dùng cho số lớn hoặc không theo bước (số điện thoại, mã bưu chính) — dùng Input.
- Không dùng khi giá trị tương đối quan trọng hơn con số chính xác — dùng Slider.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| value / defaultValuenumber | null | Mặc định: — | Giá trị số (null = trống). |
| onValueChange(value: number | null) => void | Mặc định: — | Gọi khi giá trị đổi. |
| min / maxnumber | Mặc định: — | Giới hạn; nút tương ứng bị khoá khi chạm biên. |
| step / stepPagenumber | Mặc định: 1 / step × 10 | Bước cho ↑↓ và PageUp/PageDown. |
| precisionnumber | Mặc định: — | Số chữ số thập phân (mặc định suy từ step). |
| displayValuestring | Mặc định: — | Chuỗi hiển thị thay cho số (controlled). |
| formatValue / parseValue(v: number) => string / (text: string) => number | null | Mặc định: — | Định dạng và đọc số tuỳ biến. |
| appearance"outline" | "underline" | "filled-darker" | "filled-lighter" | Mặc định: "outline" | Kiểu ô. |
| size"small" | "medium" | Mặc định: "medium" | Chiều cao 24 / 32px. |
Messages
Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.
Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.
messages.spinButton
| Khoá · Kiểu | Mặc định (tiếng Anh) | messagesVi |
|---|---|---|
| incrementstring aria-label nút tăng. | Mặc định (tiếng Anh)"Increment value" | messagesVi"Tăng giá trị" |
| decrementstring aria-label nút giảm. | Mặc định (tiếng Anh)"Decrement value" | messagesVi"Giảm giá trị" |