SxColorPicker (颜色选择器)

  • Implemented

颜色值选取组件。提供原生颜色输入与当前值展示。对齐 Microsoft Fluent UI Blazor ColorPicker (v4.13.2) 的 API 结构，并说明 NextUI 当前实现状态。

使用场景

  • 主题颜色配置
  • 色板选择与预览
  • 表单中颜色字段录入

约束说明

  • ReadOnly 与 Disabled 都会阻止变更。
  • 当前使用原生 input[type="color"]，由浏览器提供选色面板。

行为说明

  • 颜色变更会触发 ValueChanged。
  • 组件会显示当前十六进制颜色值。

API

Parameters (参数)

状态 参数名 类型 默认值 描述
Implemented Value string? #0078d4 当前选中的颜色值（如 #ffffff）。
Implemented Label string? null 顶部标签文本。
Implemented ReadOnly bool false 是否为只读状态。
Implemented Autofocus bool false 页面加载时自动获取焦点。
Implemented AriaLabel string? null 辅助功能：aria-label。
Implemented Id (继承) string? null 组件的物理 Id。
Implemented Class (继承) string? null 自定义 CSS 类名。
Implemented Style (继承) string? null 自定义样式。
Implemented Title (继承) string? null HTML title 属性。
Implemented Disabled (继承) bool false 是否禁用交互。
Not Implemented Loading (继承) bool false 加载状态（未应用）。
Implemented TabIndex (继承) int? null Tab 顺序。
Implemented AccessKey (继承) string? null 快捷键。
Implemented AdditionalAttributes (继承) IEnumerable<KeyValuePair<string, object>>? null 捕获不匹配的 HTML 属性。

Events (事件)

状态 事件名 类型 描述
[x] ValueChanged (继承) EventCallback<string?> 颜色值改变时触发。

示例

<SxColorPicker @bind-Value="_color" Label="主题色" />

参考设计 (References)

在 Playground 中打开 →