Blazor浮动标签概述
的Blazor FloatingLabel组件与标准HTML相比，提供了额外的功能和改进的用户体验标签．浮动标签显示在空的非聚焦组件的顶部，并在聚焦时移动到它们的上方。
FloatingLabel组件是为Blazor的Telerik UI，一个具有100个本地组件的专业级UI库，用于构建现代和功能丰富的应用程序。想要试用它，请注册一个30天的免费试用。
好处
Telerik FloatingLabel增强了HTML标签功能有以下几种:
- 内置的动画
- 与表单验证的集成
- 与
占位符属性 - 与非表单元素的关联——例如，TelerikDropDownList组件呈现为
< span >
正在创建Blazor FloatingLabel
- 使用
TelerikFloatingLabel标签。 - 设置
文本浮动标签参数。 - 放置一个兼容Telerik组件在浮动标签内部。
- 设置一个
Id到Telerik组件。的Id值将自动呈现为为属性的<标识>元素。
如何使用浮动标签
@code {string Name {get;设置;}}兼容性
FloatingLabel集成了可聚焦的Telerik Blazor组件:
- 自动完成
- 组合框
- DateInput
- DatePicker
- DateTimePicker
- DropDownList
- MaskedTextBox
- 多选
- NumericTextBox
- 文本区域
- 文本框
- TimePicker
FloatingLabel不支持第三方组件和通用HTML输入。
表格和验证
FloatingLabel可以根据验证状态改变它的样式。看到验证详细信息和示例。
占位符的行为
标签和占位符对于用户体验具有类似的作用。
如果Telerik组件同时具有占位符而一个浮动标签，其行为是:
- 当浮动标签为除以分量，则占位符为没有呈现．
- 当浮动标签为组件外部焦点组件没有值，也就是占位符是可见的．
FloatingLabel参数
下表列出了FloatingLabel参数。还要检查FloatingLabel API参考以获取属性、方法和事件的完整列表。
| 属性 | 类型 | 描述 |
|---|---|---|
类 |
字符串 |
对象呈现附加的CSS类span.k-floating-label-container元素，该元素包含<标识>子元素。使用类应用自定义样式或覆盖主题． |
Id |
字符串 |
呈现一个id属性的label.k-label元素。为了提高可访问性，设置与浮动标签相同的字符串Id而且AriaLabelledBy的值。 |