Blazor向导概述

Blazor组件的向导按顺序、逐步顺序显示内容。每个向导步骤都可以显示任何HTML或子组件。该向导提供灵活的布局,表单集成,并可以防止或允许用户跳过步骤。

向导使用步进组件内部,所以关于步进的知识将是一个加分项,虽然不是必需的。

Telerik UI的Blazor忍者形象

的向导组件的一部分Blazor的Telerik UI,一个专业级的UI库,包含100多个本地组件,用于构建现代和功能丰富的应用程序。想要试用它,可以注册一个30天的免费试用期。

创建Blazor向导

  1. 使用TelerikWizard标签
  2. 设置价值的参数。int.参数支持单向和双向绑定。
  3. 添加一些WizardStep实例。WizardSteps标签。
  4. 每一个WizardStep可以定义标签和一个图标.额外的步进图像或文本指示器稍后讨论。

基本Telerik向导

   <内容> 

欢迎来到向导!

用户正在执行一些操作…

谢谢!

向导值:@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参数

参见个人步进设置

下一个步骤

另请参阅

在本文中
Baidu
map