Blazor向导概述
的Blazor组件的向导按顺序、逐步顺序显示内容。每个向导步骤都可以显示任何HTML或子组件。该向导提供灵活的布局,表单集成,并可以防止或允许用户跳过步骤。
向导使用步进组件内部,所以关于步进的知识将是一个加分项,虽然不是必需的。
的向导组件的一部分Blazor的Telerik UI,一个专业级的UI库,包含100多个本地组件,用于构建现代和功能丰富的应用程序。想要试用它,可以注册一个30天的免费试用期。
创建Blazor向导
- 使用
TelerikWizard
标签 - 设置
价值
的参数。int
.参数支持单向和双向绑定。 - 添加一些
WizardStep
实例。WizardSteps
标签。 - 每一个
WizardStep
可以定义标签
和一个图标
.额外的步进图像或文本指示器稍后讨论。
<内容> 欢迎来到向导!
用户正在执行一些操作…
谢谢!
向导值:@WizardValue
@code {int WizardValue {get;设置;}}
步进
的向导步进为区域,该区域向用户显示总体进度。step还可以允许用户跳过步骤,如果显式启用的话。阅读更多关于向导步进.
内容
的<内容>
标签在每个WizardStep
是一个标准的开拓者RenderFragment
,它允许任何子内容。
按钮
的向导按钮允许用户通过向导步骤向前和向后移动。向导提供了使用内置按钮或自定义按钮的功能。阅读更多关于向导按钮.
形式的集成
的向导可以包含带有验证的表单组件.在这种情况下,Wizard steppper可以通过更改步骤的图标来显示当前的表单验证状态,从而增强表单的用户体验。
事件
的向导组件触发事件当当前步骤发生变化或用户完成所有步骤时。可以取消步骤更改。
布局
的向导可以在组件的任何一侧显示其步进-顶部(默认)或底部,左边或右边。
向导的参数
参数 | 类型及默认值 | 描述 |
---|---|---|
类 |
字符串 |
对象呈现自定义CSS类< div class = " k-wizard”> 元素。用它来覆盖主题样式. |
高度 |
字符串 |
中应用高度样式任何支持单元. |
showpage |
保龄球 ( 真正的 ) |
在组件的底部呈现一个“Step X of Y”标签。 |
StepperPosition |
WizardStepperPosition 枚举( 前 ) |
定义了向导布局和步进位置关于步骤内容。 |
价值 |
int |
设置从零开始的当前步骤的索引。支持双向绑定。 |
宽度 |
字符串 |
中应用宽度样式任何支持单元. |
WizardStepperSettings参数
参见一般步进设置.
WizardStep参数
参见个人步进设置.