为teleerik输入添加浮动标签

环境

描述

我想为Telerik输入显示一个浮动标签。当组件为空时，标签应该像占位符一样显示，并且在聚焦时应该动画到输入的顶部标签位置。

解决方案

Blazor 3.1.0的UI包括一个独立的FloatingLabel组件．用这个代替。

下面的代码片段展示了如何向TextBox、MaskedTextBox、TextArea、DatePicker和DropDownList组件添加浮动标签。元素中包含的纯HTML元素和CSS样式《Blazor》的teleerik UI主题。样式改变了<标识>元素转换为浮动标签。

< span style=" font - family:宋体;   textbox   
< span class="k-floating-label-container @MaskedTextBoxEmptyClass">   maskedtextbox   
< span class="k-float -label-container @TextAreaEmptyClass">   textarea   
< span class="k-label">     datepicker   
< span class="k-float -label-container @ dropdownlistclass ">< TelerikDropDownList Id="ddl" @bind-Value="@DropDownListValue" Data="@DropDownListData">DropDownList  @code { public const string emptyClass = "k-state-empty"; public string TextBoxValue { get; set; } public string TextBoxEmptyClass => string.IsNullOrEmpty(TextBoxValue) ? emptyClass : string.Empty; public string MaskedTextBoxValue { get; set; } public string MaskedTextBoxEmptyClass => string.IsNullOrEmpty(MaskedTextBoxValue) ? emptyClass : string.Empty; public string TextAreaValue { get; set; } public string TextAreaEmptyClass => string.IsNullOrEmpty(TextAreaValue) ? emptyClass : string.Empty; public DateTime? DatePickerValue { get; set; } public string DatePickerEmptyClass => DatePickerValue == null ? emptyClass : string.Empty; public string DropDownListValue { get; set; } public string DropDownListEmptyClass => string.IsNullOrEmpty(DropDownListValue) ? emptyClass : string.Empty; public List DropDownListData { get; set; } = new List() { "one", "two", "three" }; }