ColorPicker 颜色选择器

带预设和多种格式支持的颜色选择控件。

引入

import { ColorPicker } from 'asterui'

示例

基本颜色选择器

带饱和度/亮度面板和色调滑块的简单颜色选择器。

</>

import { ColorPicker } from 'asterui'

function App() {
  return (
      <ColorPicker defaultValue="#6366f1" />
    )
}

export default App

带文本显示

在选择器下方显示十六进制值的颜色选择器。

</>

#10B981

import { ColorPicker } from 'asterui'

function App() {
  return (
      <ColorPicker defaultValue="#10b981" showText />
    )
}

export default App

自定义预设

带自定义预设颜色色板的颜色选择器。

</>

import { ColorPicker } from 'asterui'

function App() {
  const presets = [
    '#f43f5e', '#ec4899', '#d946ef', '#a855f7',
    '#8b5cf6', '#6366f1', '#3b82f6', '#0ea5e9',
    '#06b6d4', '#14b8a6', '#10b981', '#22c55e',
  ]
  
  return (
      <ColorPicker defaultValue="#6366f1" presets={presets} />
    )
}

export default App

尺寸

不同尺寸的颜色选择器。

</>

import { ColorPicker, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        <ColorPicker size="xs" defaultValue="#f43f5e" mode="picker" />
        <ColorPicker size="sm" defaultValue="#6366f1" mode="picker" />
        <ColorPicker size="md" defaultValue="#10b981" mode="picker" />
        <ColorPicker size="lg" defaultValue="#a855f7" mode="picker" />
      </Space>
    )
}

export default App

受控模式

带状态管理的受控颜色选择器。

</>

#6366F1

import { ColorPicker, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [color, setColor] = useState('#6366f1')
  
  return (
      <Space direction="vertical" size="sm">
        <ColorPicker value={color} onChange={setColor} showText />
        <div
          className="w-full h-16 rounded-lg"
          style={{ backgroundColor: color }}
        />
      </Space>
    )
}

export default App

显示模式

仅选择器、仅色板或两者都有。

</>

Picker only

Swatches only

import { ColorPicker, Space, Typography } from 'asterui'

function App() {
  const { Text } = Typography
  
  return (
      <Space direction="vertical" size="lg">
        <Space direction="vertical" size="xs">
          <Text size="sm" muted>Picker only</Text>
          <ColorPicker mode="picker" defaultValue="#6366f1" />
        </Space>
        <Space direction="vertical" size="xs">
          <Text size="sm" muted>Swatches only</Text>
          <ColorPicker mode="swatches" defaultValue="#6366f1" />
        </Space>
      </Space>
    )
}

export default App

API

ColorPicker

属性	描述	类型	默认值
value	受控的颜色值（hex）	string	-
defaultValue	初始颜色值（非受控）	string	'#000000'
onChange	颜色改变时的回调函数	(color: string) => void	-
mode	显示模式	'swatches' | 'picker' | 'both'	'both'
presets	预设颜色色板	string[]	默认调色板
showText	在选择器下方显示十六进制值	boolean	false
allowClear	显示清除按钮以重置颜色	boolean	false
disabled	禁用选择器	boolean	false
size	选择器大小	'xs' | 'sm' | 'md' | 'lg'	'md'
data-testid	子元素的测试 ID 前缀	string	'colorpicker'
className	额外的 CSS 类名	string	-

无障碍

• 饱和度/亮度面板具有 role="slider" 和 aria-valuetext
• 色调滑块具有 role="slider" 及 aria-valuemin、aria-valuemax 和 aria-valuenow
• 颜色预设使用 role="listbox" 和 role="option" 及 aria-selected
• 完整的键盘导航：方向键调整颜色值，Shift+方向键进行更大步长调整
• 交互元素上的可见焦点指示器
• 所有交互元素都有描述性的 aria-label 属性