颜色选择器#

ColorPickerProps#

ColorPickerProps 是 ColorPicker 组件的属性类型，它可以通过以下两种方式定义：

1. 使用 title 属性#

• title (string): 为颜色选择器提供一个标题，描述颜色选择器的用途或提供指导信息。

2. 使用 children 属性#

• children (VirtualNode | undefined | null | (VirtualNode | undefined | null)[] | VirtualNode): 提供一个自定义视图来描述所选颜色的用途。系统的颜色选择器 UI 会根据此视图的文本来设置标题。如果不使用 children，则可以仅使用 title。

其他属性#

• value (Color): 当前选定的颜色值。可以是关键字颜色、十六进制颜色字符串或 RGBA 字符串。

• onChanged ((value: Color) => void): 颜色变化时的回调函数。当用户选择颜色时会调用此回调，并传递新的颜色值。

• supportsOpacity (boolean, 可选): 如果设置为 true，则允许调整选定颜色的透明度。默认为 true。

ColorPicker#

ColorPicker 组件提供了一个系统颜色选择器 UI，允许用户选择颜色，并通过 onChanged 事件将选择的颜色传递回应用。该组件支持以下格式的颜色：

• 关键字颜色（例如：green, red, blue 等）
• 十六进制颜色字符串（例如：#FF5733 或 #333）
• CSS rgba 字符串（例如：rgba(255,0,0,1)）

示例代码#

1import { ColorPicker, useState } from 'scripting'
2
3const MyComponent = () => {
4  const [color, setColor] = useState<Color>('#FF5733')
5
6  return (
7    <ColorPicker
8      title="Pick a Color"
9      value={color}
10      onChanged={setColor}
11    />
12  )
13}

说明#

在上面的示例中：

• ColorPicker 组件的 title 被设置为 "Pick a Color"，提示用户选择颜色。
• 初始颜色值是 #FF5733。
• onChanged 回调会在颜色更改时触发，更新 color 状态。

可选的透明度支持#

如果你希望支持调整颜色的透明度，可以通过设置 supportsOpacity 属性来启用此功能：

1<ColorPicker
2  title="Pick a Color"
3  value={color}
4  onChanged={setColor}
5  supportsOpacity={true}
6/>

Color 类型#

Color 类型用于定义颜色的各种格式，包括：

• 关键字颜色: 如 "red", "green", "blue" 等。
• 十六进制字符串: 如 "#FF5733"。
• CSS rgba 字符串: 如 rgba(255, 0, 0, 0.5)。

示例#

1const color: Color = 'rgba(255, 0, 0, 0.5)'

总结#

ColorPicker 组件是一个强大的工具，可以让用户轻松选择颜色，并支持透明度调整。通过传递不同的属性，可以自定义颜色选择器的外观和行为。