颜色选择器

让用户从色板中选取颜色，拖拽饱和度/明度画布，或粘贴十六进制值。非常适合主题设置、品牌颜色选择器，以及任何需要用户选择颜色的场景。

<flux:color-picker wire:model="theme" />

格式

使用 format 属性选择输出格式。支持的值：hex（默认）、hexa（带 alpha 的 hex）、rgb、rgba（带 alpha 的 RGB）、hsl、hsla（带 alpha 的 HSL）。支持 alpha 的格式会在弹出窗口中自动渲染 alpha 滑块。

<flux:color-picker format="hex" /><flux:color-picker format="hexa" /><flux:color-picker format="rgb" /><flux:color-picker format="rgba" /><flux:color-picker format="hsl" /><flux:color-picker format="hsla" />

尺寸

颜色选择器支持三种尺寸，与其他表单组件保持一致。

<flux:color-picker /><flux:color-picker size="sm" /><flux:color-picker size="xs" />

按钮触发器

使用 type="button" 获取更简单的触发器，显示选中的颜色并在点击时打开弹出窗口。适用于紧凑的工具栏或仅色板的选择器，无需手动输入。

<flux:color-picker type="button" />

自定义色板

使用您自己的品牌颜色替换默认的 24 色 Tailwind 调色板。向 :swatches 属性传递十六进制字符串数组。您还可以传递 [value, label] 对，为色板提供可访问的标签。

<flux:color-picker :swatches="['#ef4444', '#22c55e', '#3b82f6', '#f59e0b', '#a855f7']" /><!-- With [value, label] pairs for accessible swatch labels --><flux:color-picker :swatches="[['#ef4444', 'Red'], ['#22c55e', 'Green'], ['#3b82f6', 'Blue']]" />

隐藏色板

传递 :swatches="false" 完全隐藏默认色板网格。弹出窗口将仅显示 SV 区域、色相滑块和十六进制输入框。

<flux:color-picker :swatches="false" />

自定义布局

以任意顺序组合 flux:color-picker.area、flux:color-picker.slider、flux:color-picker.input 和 flux:color-picker.swatches，构建完全自定义的弹出窗口布局。

<flux:color-picker>    <div class="flex flex-col gap-3">        <flux:color-picker.input placeholder="#000000" />        <flux:separator />        <flux:color-picker.area />        <flux:color-picker.slider channel="hue" />    </div></flux:color-picker>

取色器

添加 dropper 属性可渲染一个按钮，让用户从屏幕任何位置选取颜色。使用浏览器的 EyeDropper API — 在不支持的浏览器中会自动禁用。

<flux:color-picker dropper />

可清除

添加 clearable 属性可在设置值时在触发器上渲染清除（X）按钮。

<flux:color-picker clearable />

可复制

添加 copyable 属性可在触发器上渲染剪贴板复制按钮。单击即可复制配置格式的颜色值。仅适用于默认输入触发器。

<flux:color-picker copyable />

禁用

阻止交互并视觉上使触发器变暗。

<flux:color-picker disabled />

参考

flux:color-picker

属性	描述
wire:model	将颜色选择器绑定到 Livewire 属性。值为配置格式的 CSS 颜色字符串。更多信息请参阅 wire:model 文档。
value	初始值，可以是任何 CSS 颜色字符串。显示时自动规范化为配置的格式。
name	生成具有此名称的隐藏表单输入，用于原生表单提交（不需要 wire:model）。
format	输出格式。选项：hex（默认）、hexa、rgb、rgba、hsl、hsla。支持 alpha 的格式会在弹出窗口中自动渲染 alpha 滑块。
type	触发器类型。选项：input（默认）、button。默认的 input 触发器允许用户直接输入或粘贴颜色。button 触发器显示值并在点击时打开弹出窗口。
placeholder	输入触发器的占位符文本。默认：格式特定（例如 hex 格式为 #000000）。
size	触发器尺寸。选项：sm、xs。默认：base。
:swatches	自定义色板调色板，可以是十六进制字符串数组或 [value, label] 对数组，或设置为 false 完全隐藏默认色板网格。
dropper	在弹出窗口中渲染取色器按钮，允许用户从屏幕选取颜色。使用 EyeDropper API — 在不支持的浏览器中自动禁用。默认：false。
clearable	在设置值时在触发器上渲染清除（X）按钮。默认：false。
copyable	在触发器上渲染剪贴板复制按钮。仅适用于默认输入触发器。默认：false。
label	字段标签。转发至 flux:with-field。
description	字段描述。转发至 flux:with-field。
disabled	禁用选择器。默认：false。
invalid	将触发器标记为无效。通过 wire:model 绑定时，从字段的错误包中自动检测。

flux:color-picker.area

属性	描述
class	应用于区域元素的其他 CSS 类。

flux:color-picker.slider

属性	描述
channel	此滑块控制的颜色通道。选项：hue（默认）、alpha。

flux:color-picker.input

属性	描述
placeholder	文本输入的占位符文本。默认：格式特定（例如 #000000）。

flux:color-picker.swatches

属性	描述
class	应用于色板容器的其他 CSS 类。

flux:color-picker.swatch

属性	描述
value	颜色值，为 CSS 颜色字符串（例如 #ef4444）。
label	色板的人类可读标签。用作 aria-label 和悬停工具提示。默认为 value。

flux:color-picker.dropper

属性	描述
class	应用于取色器元素的其他 CSS 类。在不支持 EyeDropper API 的浏览器中会自动禁用。