Blazor ColorPicker概述

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

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

下载免费试用

在本文中:

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

基础知识

使用Telerik ColorPicker为Blazor:

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

例子

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

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

接口

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

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

在ColorPicker弹出窗口外单击作为一个应用行动。

特性

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

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

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

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

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

按钮

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

自定义图标

属性中呈现图标或图像的属性主部件按钮．此图标可用于从视觉上区分页面上不同的颜色选择器。在这种情况下，所选颜色显示在图标下方。

一次只使用一个属性:

• 图标-字符串-指定内置字体图标类．
• ImageUrl-字符串-指定图像的URL。
• IconClass-字符串-设置自定义图标类。

支持的值格式

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

• 十六进制
  • 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的整型颜色值

不支持颜色关键字。

ColorPicker参考和方法

控件添加对组件实例的引用以使用选择器的方法．

 打开弹出窗口 @code {private TelerikColorPicker ColorPickerRef {get;设置;} private string颜色{get;设置;} = "rgb(40,47,137)";private void OpenPopup() {ColorPickerRef.Open();}}

另请参阅

• 选择器的观点
• 事件选择器
• ColorPicker现场演示