Blazor FlatColorPicker概述

的FlatColorPicker为Blazor是一个交互式组件，允许从调色板或HSV画布。用户也可以手动输入特定的RGB/HEX颜色值。FlatColorPicker实际上与选择器组件唯一不同的是，ColorPicker占用更少的空间，并在弹出窗口中显示颜色选择UI。

的FlatColorPicker组件Blazor的Telerik UI，一个专业级的UI库，包含100个本地组件，用于构建现代和功能丰富的应用程序。想要试用它，可以注册一个30天的免费试用期。

下载免费试用

在本文中:

• 基础知识
• 例子
• 接口
• 特性
• 支持的值格式

基础知识

为Blazor使用Telerik FlatColorPicker:

1. 添加TelerikFlatColorPicker标签。
2. 设置它价值的任何属性支持HEX/RGB格式．使用一个字符串财产与单向或双向绑定。
3. (可选)设置ValueFormat来ColorFormat。十六进制或ColorFormat。Rgb如果应用程序需要特定的颜色格式。

例子

下面是一个简单的FlatColorPicker声明和生成的UI。

@* Blazor FlatColorPicker *@  @code {string Color {get;设置;} = "rgb(40,47,137)";｝

接口

下图显示了所有FlatColorPicker界面元素:

• 视图选择器(左上)
• 颜色预览框(右上)
• 当前颜色框(颜色预览下方)
• 清除按钮(上)
• 色相和不透明度滑块的调色板瓷砖或HSV画布(中间)
• 带有切换按钮的RGBA或HEX值文本框(底部)
• 应用和取消按钮(底部)

特性

FlatColorPicker标签通过其属性公开了以下特性:

• 价值-字符串-将FlatColorPicker的值设置为几个不同的颜色格式．支持双向绑定。
• ValueFormat-ColorFormat-设置颜色格式，该组件将在应用程序代码中返回。默认情况下，该属性没有设置，值格式将根据所使用的视图而改变:Rgb当从GradientView中选择颜色时，以及十六进制当从PaletteView中选择颜色时。
• FlatColorPickerViews-RenderFragment-一个嵌套容器来列出FlatColorPicker视图．默认情况下，所有视图都是启用的，用户可以通过按钮在它们之间切换。每个视图标记都有自己的配置属性。
• 视图-ColorPickerView-设置默认选择视图（ColorPickerView。梯度默认情况下)。支持双向绑定。

• ShowPreview-保龄球-切换当前颜色框和颜色预览框在弹出窗口(真正的默认情况下)。

• 类-字符串类中呈现自定义CSS类div.k-flatcolorpicker元素。

• 启用-保龄球-决定用户是否可以打开弹出窗口并更改值(真正的默认情况下)。

按钮

• ShowButtons-保龄球-设置应用和取消按钮的可见性(真正的默认情况下)。
• ShowClearButton-保龄球-设置“清除”按钮的可见性。

支持的值格式

FlatColorPicker接受以下格式的应用程序代码的值:

• 十六进制
  • 3位数-# f00
  • 6位数-# ff0000
  • 8位数字，包括alpha透明度-# ff000080
• RGB或RGBA
  • 整型颜色值-Rgb (255,0,0)
  • 百分比颜色值-Rgb (100%， 0%， 0%)
  • alpha不透明度必须始终是0到1 -之间的十进制数Rgba (100%， 0%， 0%， 0.5)．注意rgba ()符号，与rgb ()以上。

用户可以输入以下格式的值:

• 所有的十六进制
• RGB和RGBA的整型颜色值

不支持颜色关键字。

另请参阅

• FlatColorPicker视图
• FlatColorPicker事件
• FlatColorPicker现场演示