Yugen UI

SwatchPicker

SwatchPicker cho phép chọn một màu (hoặc chất liệu) trong bảng ô mẫu.

Gồm ColorSwatch (màu CSS bất kỳ — đây là dữ liệu nên được phép dùng HEX), ImageSwatch (ảnh hoạ tiết) và EmptySwatch (ô trống, vd. "Thêm màu"). Ô đang chọn có vòng 2px brand-stroke với khe background-1 bên trong. Bàn phím: mũi tên di chuyển focus (tự đảo trong RTL), Enter/Space để chọn; Tab vào/ra nhóm một lần.
Đã chọn: Hồng anh đào

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 { SwatchPicker, ColorSwatch, ImageSwatch, EmptySwatch } 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.

Lưới

layout="grid" + columnCount; ↑/↓ đi theo cột, ←/→ theo thứ tự.

Kích thước & hình dạng

size extra-small 20 · small 24 · medium 28 · large 32px; shape square, rounded, circular.

Ảnh, ô trống & disabled

ImageSwatch cho chất liệu; ô disabled bị bỏ qua khi điều hướng; EmptySwatch làm nút thêm.

Cách dùng

Nên
  • Mỗi ô có aria-label là tên màu dễ hiểu ("Hồng anh đào"), không chỉ mã HEX.
  • Hiện tên màu đang chọn ở gần để không chỉ dựa vào màu.
  • Nhóm màu cùng họ theo hàng/cột trong layout grid.
Không nên
  • Không dùng SwatchPicker cho lựa chọn không phải màu/chất liệu — dùng RadioGroup.
  • Không đặt quá nhiều ô (>40) — cân nhắc ô chọn màu tự do (input type="color") hoặc ô nhập HEX.

Props

Prop · KiểuMặc địnhMô tả
selectedValue / defaultSelectedValuestringMặc định: —Giá trị đang chọn (controlled / uncontrolled).
onSelectionChange(value: string) => voidMặc định: —Gọi khi chọn ô mới (click, Enter, Space).
layout"row" | "grid"Mặc định: "row"Hàng (tự xuống dòng) hoặc lưới.
columnCountnumberMặc định: —Số cột khi layout="grid".
size"extra-small" | "small" | "medium" | "large"Mặc định: "medium"20 / 24 / 28 / 32px.
shape"square" | "rounded" | "circular"Mặc định: "square"Hình dạng ô.
spacing"small" | "medium"Mặc định: "medium"Khoảng cách 2 / 4px.
ColorSwatch.color / valuestringMặc định: —Màu CSS (dữ liệu) và giá trị trả về.
ImageSwatch.srcstringMặc định: —URL ảnh hoạ tiết.
*.disabled / aria-label / iconboolean / string / ReactNodeMặc định: —Vô hiệu hoá, nhãn đọc, icon chồng lên ô.

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.swatchPicker

Khoá · KiểuMặc định (tiếng Anh)messagesVi
emptySwatchstring

aria-label mặc định của EmptySwatch.

Mặc định (tiếng Anh)"Empty swatch"messagesVi"Ô trống"