Blazor Switch简介
的Blazor Switch组件允许用户在选中和未选中状态之间切换。
Switch组件是Blazor的Telerik UI,一个专业级的UI库,包含100多个本地组件,用于构建现代和功能丰富的应用程序。想要试用它,可以注册一个30天的免费试用期。
创建Blazor交换机
- 使用
< TelerikSwitch >
标签 - 提供一个
价值
(单向绑定)或@bind-Value
(双向绑定)
使用双向数据绑定的Telerik Switch的基本设置
@* TelerikSwitch组件的基本设置*@ @code {private bool isSelected {get;设置;}}
上面代码片段的结果
标签
Switch有专用的在
而且从
作为组件值的文本表示形式的标签。阅读更多关于Switch标签....
事件
Blazor Switch生成事件,您可以处理并进一步自定义其行为。阅读更多关于Switch事件....
验证
通过使用内置验证,可以确保组件值是可接受的。阅读更多关于输入验证的信息....
开关参数
Switch参数说明如下表所示。同时查看交换机API参考获取所有属性、方法和事件的完整列表。
属性 | 类型及默认值 | 描述 |
---|---|---|
启用 |
保龄球 |
组件是否启用。 |
Id |
字符串 |
渲染为id 属性。< span > 元素。 |
TabIndex |
int |
的tabindex 在Switch上呈现的属性。 |
价值 |
保龄球 或bool吗? |
Switch的值。支持双向绑定。 |
OnLabel |
字符串 |
组件的标签价值 是真正的 . |
OffLabel |
字符串 |
组件的标签价值 是假 . |
造型和外观
通过以下参数可以自定义Blazor Switch的外观:
属性 | 类型及默认值 | 描述 |
---|---|---|
类 |
字符串 |
将在Switch的主包装元素上呈现的CSS类。用它来自定义切换背景颜色和其他样式 |
宽度 |
字符串 |
组件的宽度。可以将Width参数设置为支持单位. |
中,可以找到自定义Switch样式的更多选项外观的文章.
交换机参考和方法
Switch是一个泛型组件,它的类型来自它所绑定的模型字段保龄球
或bool吗?
(一个零
值被视为假
).控件添加对组件实例的引用以使用开关的方法.
方法 | 描述 |
---|---|
FocusAsync |
以编程方式聚焦Switch。 |
@*使用Switch引用以编程方式聚焦组件*@ 聚焦开关 @code {bool toggleSwitch {get;设置;} //该字段的类型决定了引用的类型TelerikSwitch SwitchRef {get;设置;} void FocusSwitch() {SwitchRef.FocusAsync();}}