Blazor步骤概述
Steps是step组件的构建块。属性可以包括所需的步骤StepperStep
标记每一步。的特性来配置步骤外观StepperStep
暴露-每个步骤包括一个可视化指示器,可以定义a标签为相应的指标和管理步骤状态而且有效性.
步骤的整个呈现也可以使用一步模板.
步骤参数
的StepperStep
公开以下参数,允许您配置它们的外观:
指标
的视觉指标的步骤可以包括以下内容。
参数 | 类型及默认值 | 描述 |
---|---|---|
文本 |
字符串 |
指定步骤指示符文本。 |
图标 |
对象 |
将在步骤指示符中呈现的图标。 |
状态
步骤可以有一个州在下面。
参数 | 类型及默认值 | 描述 |
---|---|---|
禁用 |
保龄球 ( 假 ) |
指定是否禁用该步骤。 |
可选 |
保龄球 ( 假 ) |
指定该步骤是否是可选的。 |
其他参数
参数 | 类型及默认值 | 描述 |
---|---|---|
标签 |
字符串 |
指定了标签文本它将在相应的步骤指示符下呈现。 |
有效的 |
bool吗? ( 零 ) |
指定步骤是否为有效的与否。 |
类 |
字符串 |
CSS类的当前步骤。 |
步骤声明
若要为steper组件包含所需的步骤,可以手动声明StepperStep
标记每个步骤或循环通过您的收集步骤数据,并呈现一个StepperStep
标记将其参数绑定到模型的相应字段。
@*循环一个集合,为集合中的所有项创建一个步骤。*@ < telerikstep > < step Steps> @foreach (var step in Steps) {< step step Label="@step. "标签”图标= " @step。图标" Optional="@step.Optional" Disabled="@step.Disabled"> } @code { List Steps { get; set; } protected override void OnInitialized() { Steps = new List() { new StepModel() { Label = "Personal Info", Icon = FontIcon.User }, new StepModel() { Label = "Education", Icon = FontIcon.Book, Disabled = true }, new StepModel() { Label = "Experience", Icon = FontIcon.FlipVertical }, new StepModel() { Label = "Attachments", Icon = FontIcon.FileAdd, Optional = true } }; base.OnInitialized(); } public class StepModel { public string Label { get; set; } public FontIcon? Icon { get; set; } public bool Disabled { get; set; } public bool Optional { get; set; } } }