uiUI 组件系统
对比

颜色选择

Color Picker

同时支持色彩空间选择和可表达的颜色值。

交互预览实时预览
打开原生颜色面板
使用代码安装指南 ↗
app.mjs
import { mount } from '@sofish/ui/browser';

const view = mount(
  document.querySelector('#example'),
  'color-picker'
);

view.element.addEventListener('ui:change', event => {
  console.log(event.detail.value);
});

// view.update({ ...nextProps });
// view.destroy();

什么时候用

主题、图表或创作工具的配色。

什么时候不用

只有几个业务颜色时,用带名称的预设选项更明确。

COMPONENT API

属性与事件

传入业务数据,通过事件连接你的应用。

属性默认值
label"强调色"
name"sample-color"
value"#287c58"
disabledfalse
help"浏览器原生颜色选择器"
id—
attributes—
placeholder—
required—
readOnly—
min—
max—
step—
minLength—
maxLength—
autocomplete—

事件

ui:change

安装、生命周期与完整 API ↗

INTERACTION NOTES

交互与可访问性

  • 颜色值可文本输入和复制。
  • 选择状态不能只靠颜色区别。

和相似组件的区别

颜色选择器编辑颜色;色板只展示颜色或少量预设。

RESEARCH & ALTERNATIVES

官方实现映射

以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。

Element PlusColorPicker
官方提供

支持颜色格式、透明度与预定义颜色。

关键状态

当前颜色预设颜色透明度无效值

Vue / Nuxt · 来源核验

一起了解

单行文本输入 ↗滑块与范围 ↗表单与字段 ↗