chenzy-design

代码演示

import { ColorPicker } from '@chenzy-design/svelte';

自定义 trigger

使用 eyeDropper={true} 开启滴管功能，支持从浏览器内或外部软件屏幕取色。

注意事项

开启此功能需要当前网页部署在 HTTPS 或 localhost 域名等安全 context 下，否则无效果。需用户浏览器版本 Chromium > 95

在进行各种颜色表示格式之间相互转换时，部分格式之间存在理论误差，因此 onChange 返回给你的值是同时包含了 hsva hex rgba 三种格式的色值的对象。

你传入的 defaultValue(非受控) 和 value(受控) 也应当是同样包含三种格式的对象。

我们提供了静态方法 ColorPicker.colorStringToValue，用于将常见颜色字符串转换为该对象，支持 rgb(57,197,187) #39c5bb hsv(176,71,77) 等字符串直接传入（亦可用等价的具名导出 colorStringToValue）。

通过传入 value 来受控使用

使用 topSlot 和 bottomSlot 在顶部和底部渲染额外元素

TopSlot

Bottom Slot

参数	说明	类型	默认值
alpha	是否开启透明度选择	boolean	false
bottomSlot	底部渲染额外元素	Snippet	-
children	自定义 trigger，仅 `usePopover` 时生效；缺省渲染默认色块	Snippet	-
class	类名	string	-
defaultFormat	默认手动输入时的格式，可选值 `hex`、`rgba`、`hsva`	string	`hex`
defaultValue	默认值（非受控）	`ColorValue`	`#39c5bb` 对应的三态对象
eyeDropper	是否开启滴管拾色器	boolean	true
height	饱和度方块高度	number	280
popoverProps	放入 Popover 时，Popover 传入的 props	`PopoverProps`	-
style	样式	string	-
topSlot	顶部渲染额外元素	Snippet	-
usePopover	是否放入 Popover 渲染	boolean	false
value	受控值	`ColorValue`	-
width	宽度	number	280
onChange	用户选中颜色的回调	`(value: ColorValue) => void`	-

三种颜色格式同源的值对象，hsva 的 s/v 为 0-100，a 为 0-1。

属性	说明	类型
hex	十六进制色值字符串，透明度不为 1 时为 8 位	string
hsva	色相 / 饱和度 / 明度 / 透明度	`{ h: number; s: number; v: number; a: number }`
rgba	红 / 绿 / 蓝 / 透明度	`{ r: number; g: number; b: number; a: number }`

函数	说明	类型
ColorPicker.colorStringToValue	常见颜色字符串转 ColorValue 三态对象，支持 `#39c5bb`、`rgb(57,197,187)`、`rgba(57,197,187,0.5)`、`hsv(176,71,77)`；无法识别时抛错	`(raw: string) => ColorValue`

饱和度方块、色相滑块、透明度滑块均为 role="slider"，携带 aria-label、aria-valuemin、aria-valuemax、aria-valuenow；饱和度方块与透明度滑块另有 aria-valuetext 播报百分比。
三个滑块均可聚焦并支持键盘操作：←/→、↑/↓ 步进，Home/End 跳至极值。
手动输入区复用 Input / InputNumber / Select / Button，各自携带可访问名与内置无障碍能力。
usePopover 模式下浮层的显隐、焦点管理与 Esc 关闭由内部 Popover 承载。

color

font

radius

spacing

width

变量	默认值	用法
--cd-color-color-picker-handle-border	var(--cd-color-white)	拖拽把手 / 滑块把手边框颜色

显示第 1 条-第 1 条，共 1 条