Yugen UI

ColorPicker

ColorPicker chọn màu tuỳ ý: vùng độ bão hoà / độ sáng, thanh sắc độ và độ đục, ô nhập HEX / RGB / HSL.

Kéo hoặc dùng mũi tên trên vùng màu (trái / phải: độ bão hoà, lên / xuống: độ sáng, Shift ×10); thanh sắc độ và độ đục là slider có đủ bàn phím. Ô nhập đổi giữa HEX, RGB và HSL; gõ là áp dụng khi giá trị hợp lệ, mũi tên lên / xuống tăng giảm từng kênh. Nút lấy màu trên màn hình chỉ hiện khi trình duyệt có EyeDropper API (Chrome, Edge). swatches hiện màu có sẵn bằng SwatchPicker, ô trùng màu đang chọn được đánh dấu. Giá trị là hex ("#rrggbb", "#rrggbbaa" khi alpha và độ đục dưới 100%); onValueChange kèm rgb / hsl / hsv. Dải màu luôn chạy trái → phải, kể cả RTL. Đặt trong Popover để làm ô chọn màu.
Đã chọn #c2347a

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 { ColorPicker, parseColor, type ColorPickerChangeData } 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.

Đã chọn #0f6cbd99

Độ đục (alpha)

Thêm thanh và ô độ đục; giá trị thành hex 8 chữ số.

Trong Popover

Nút hiện màu đang chọn mở ColorPicker.

Cách dùng

Nên
  • Thêm swatches với màu thương hiệu để người dùng chọn nhanh và nhất quán.
  • Hiện mã màu cạnh nút mở picker, không chỉ ô màu.
  • Kiểm tra độ tương phản khi màu người dùng chọn dùng cho chữ.
Không nên
  • Không dùng ColorPicker khi chỉ có vài màu cố định — dùng SwatchPicker.
  • Không bật alpha khi nơi dùng màu không hỗ trợ trong suốt.

Props

Prop · KiểuMặc địnhMô tả
value / defaultValuestringMặc định: —Màu đã chọn: hex, rgb() hoặc hsl(). defaultValue mặc định là đen.
onValueChange(value: string, data: ColorPickerChangeData) => voidMặc định: —value là hex; data có hex, rgb, hsl, hsv.
alphabooleanMặc định: falseHiện thanh và ô độ đục.
swatches(string | { color: string; label?: string })[]Mặc định: —Màu có sẵn, hiện bằng SwatchPicker.
defaultFormat"hex" | "rgb" | "hsl"Mặc định: "hex"Định dạng các ô nhập lúc đầu.
eyeDropperbooleanMặc định: trueNút lấy màu trên màn hình, khi trình duyệt hỗ trợ.
disabledbooleanMặc định: falseKhoá cả bộ chọn.
refRef<HTMLDivElement>Mặc định: —Trỏ tới khung ngoài.
parseColor(input)(input: string) => RgbaColor | nullMặc định: —Đọc hex, rgb(), hsl() thành { r, g, b, a }.

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

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

aria-label của vùng chọn độ bão hoà / độ sáng.

Mặc định (tiếng Anh)"Saturation and brightness"messagesVi"Độ bão hoà và độ sáng"
areaValue(saturation: number, brightness: number) => string

Giá trị đọc cho trình đọc màn hình (phần trăm).

Mặc định (tiếng Anh)(saturation, brightness) => `Saturation ${saturation}%, brightness ${brightness}%`messagesVi(saturation, brightness) => `Độ bão hoà ${saturation}%, độ sáng ${brightness}%`
huestringMặc định (tiếng Anh)"Hue"messagesVi"Sắc độ"
alphastring

Thanh và ô độ đục (alpha).

Mặc định (tiếng Anh)"Opacity"messagesVi"Độ đục"
formatstring

aria-label ô chọn định dạng (HEX / RGB / HSL).

Mặc định (tiếng Anh)"Color format"messagesVi"Định dạng màu"
hexstringMặc định (tiếng Anh)"Hex"messagesVi"Hex"
redstringMặc định (tiếng Anh)"Red"messagesVi"Đỏ"
greenstringMặc định (tiếng Anh)"Green"messagesVi"Xanh lá"
bluestringMặc định (tiếng Anh)"Blue"messagesVi"Xanh dương"
saturationstringMặc định (tiếng Anh)"Saturation"messagesVi"Bão hoà"
lightnessstringMặc định (tiếng Anh)"Lightness"messagesVi"Độ sáng"
eyeDropperstring

Nút lấy màu trên màn hình (EyeDropper).

Mặc định (tiếng Anh)"Pick a color from the screen"messagesVi"Lấy màu trên màn hình"
swatchesstring

Nhãn nhóm màu có sẵn (swatches).

Mặc định (tiếng Anh)"Preset colors"messagesVi"Màu có sẵn"