Blazor ColorPicker概述
的ColorPicker为Blazor是一个交互式组件,允许从弹出调色板或HSVA画布。用户也可以手动输入特定的RGB/HEX颜色值。ColorPicker实际上与FlatColorPicker组件唯一不同的是,ColorPicker占用更少的空间,并在弹出窗口中显示颜色选择UI。
ColorPicker组件是Blazor的Telerik UI,一个专业级的UI库,包含100多个本地组件,用于构建现代和功能丰富的应用程序。想要试用它,可以注册一个30天的免费试用期。
在本文中:
基础知识
使用Telerik ColorPicker为Blazor:
- 添加
TelerikColorPicker
标签。 - 设置它
价值
的任何属性支持HEX/RGB格式.使用一个字符串
财产与单向或双向绑定。 - (可选)设置
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
-保龄球
-设置“清除”按钮的可见性。
自定义图标
属性中呈现图标的属性主部件按钮.此图标可用于从视觉上区分页面上不同的颜色选择器。在这种情况下,所选颜色显示在图标下方。
一次只使用一个属性:
图标
-对象
-指定内置字体或SVG图标.
支持的值格式
ColorPicker接受应用程序代码中以下格式的值:
- 十六进制
- 3位数-
# f00
- 6位数-
# ff0000
- 8位数字,包括alpha透明度-
# ff000080
- 3位数-
- RGB或RGBA
- 整型颜色值-
Rgb (255,0,0)
- 百分比颜色值-
Rgb (100%, 0%, 0%)
- alpha不透明度必须始终是0到1 -之间的十进制数
Rgba (100%, 0%, 0%, 0.5)
.注意rgba ()
符号,与rgb ()
以上。
- 整型颜色值-
用户可以输入以下格式的值:
- 所有的十六进制
- RGB和RGBA的整型颜色值
不支持颜色关键字。
ColorPicker参考和方法
控件添加对组件实例的引用以使用选择器的方法.
方法 | 描述 |
---|---|
关闭 |
关闭组件弹出窗口。 |
FocusAsync |
聚焦组件的主要元素。总是等待 这个调用,正如它所依赖的JSInterop . |
开放 |
打开组件弹出窗口。 |
打开弹出窗口 @code {private TelerikColorPicker ColorPickerRef {get;设置;} private string颜色{get;设置;} = "rgb(40,47,137)";private void OpenPopup() {ColorPickerRef.Open();}}