颜色选择器

QColor 组件提供了一种输入颜色的方式。

用法

基础用法

配合 QInput 使用

QInput 的 rules 属性有一些现成的辅助校验规则可用：完整列表。你可以直接使用这些规则，也可以编写字符串来指定你的自定义需求。

示例：“hexColor”、“rgbOrRgbaColor”、“anyColor”。

更多信息请参阅：QInput。

隐藏头部或底部

你可以选择不渲染头部和/或底部，如下面的示例所示：

自定义默认视图

你还可以设置默认显示的视图，如下面的示例所示——我们同时指定了不渲染头部和底部，最终呈现出一个简洁的调色板供用户选择：

自定义调色板

强制暗色模式

默认值

延迟更新

禁用和只读

原生表单提交

当使用带有 action 和 method 的原生表单时（例如在 Quasar 配合 ASP.NET 控制器使用的场景），你需要为 QColor 指定 name 属性，否则 formData 中将不会包含它的值（如果需要的话）：

无障碍访问

v2.25+

QColor 仅部分可访问，且当前激活的视图会影响可访问性。Tune 视图——原生文本/数字输入框加滑块——是键盘和屏幕阅读器的操作路径。另一方面，调色板色块和色谱面板是仅指针可用的：它们无法通过键盘到达，也不向辅助技术暴露任何内容。

已暴露的部分带有来自 Quasar 语言包（colorPicker.*）的本地化无障碍名称：视图标签页、头部的颜色值输入框以及色相/不透明度滑块，这些都无法从外部命名。

disable 状态的 QColor 会在根元素上暴露 aria-disabled="true"。

如果你的应用需要无障碍的颜色输入，请让用户从 Tune 视图开始（default-view="tune"），或者提供一种替代方式来输入颜色（例如一个接受十六进制值的普通 QInput）。