Blazor的Telerik UI?下载30天免费试用

Blazor步骤概述

Steps是step组件的构建块。属性可以包括所需的步骤StepperStep标记每一步。的特性来配置步骤外观StepperStep暴露-每个步骤包括一个可视化指示器,可以定义a标签为相应的指标和管理步骤状态而且有效性

步骤的整个呈现也可以使用一步模板

在本文中:

步骤参数

StepperStep公开以下参数,允许您配置它们的外观:

指标

视觉指标的步骤可以包括以下内容。

参数 类型及默认值 描述
文本 字符串 指定步骤指示符文本。
图标 对象 将在步骤指示符中呈现的图标。

状态

步骤可以有一个在下面。

参数 类型及默认值 描述
禁用 保龄球
指定是否禁用该步骤。
可选 保龄球
指定该步骤是否是可选的。

其他参数

参数 类型及默认值 描述
标签 字符串 指定了标签文本它将在相应的步骤指示符下呈现。
有效的 bool吗?
指定步骤是否为有效的与否。
字符串 CSS类的当前步骤。

步骤声明

若要为steper组件包含所需的步骤,可以手动声明StepperStep标记每个步骤或循环通过您的收集步骤数据,并呈现一个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; } } }

另请参阅

在本文中
Baidu
map