Blazor向导概述

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

向导使用步进组件所以了解步进者将是加分项,尽管不是必须的。

为Blazor Ninja图像的Telerik UI

Wizard组件是为Blazor的Telerik UI,一个具有100个本地组件的专业级UI库,用于构建现代和功能丰富的应用程序。想要试用它,请注册一个30天的免费试用。

创建Blazor向导

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

Telerik基本向导

    

欢迎使用向导!

用户正在执行一些操作…

谢谢!

Wizard Value: @WizardValue

@code {int WizardValue {get;设置;}}

步进

向导步进是向用户显示总体进度的区域。step还可以允许用户跳过步骤,如果显式地启用了这一点。阅读更多关于Wizard stepp的信息

内容

<内容>标签内WizardStep是标准的开拓者吗RenderFragment,它允许任何子内容。

按钮

向导按钮允许用户通过向导步骤向前和向后移动。向导提供了使用内置按钮或自定义按钮的功能。阅读更多关于向导按钮的信息

形式的集成

向导可以包含带有验证的表单组件.在这种情况下,Wizard steper可以通过更改步骤图标来显示当前表单验证状态,从而增强表单的用户体验。

事件

向导组件触发事件当前步骤发生变化或用户完成所有步骤时。可以取消步骤更改。

布局

向导可以在组件的任意一侧显示步进-顶部(默认)或底部,左边或右边。

向导的参数

参数 类型及默认值 描述
字符串 对象呈现自定义CSS类< div class = " k-wizard”>元素。用它来覆盖主题样式
高度 字符串 中应用高度样式任何支持单位
showpage 保龄球
真正的
在组件的底部呈现一个“Step X of Y”标签。
StepperPosition WizardStepperPosition枚举
定义了向导布局和步进位置关于步骤内容。
价值 int 设置从零开始的当前步骤的索引。支持双向绑定。
宽度 字符串 在中应用宽度样式任何支持单位

WizardStepperSettings参数

参见一般步进设置

WizardStep参数

参见个人步进设置

下一个步骤

另请参阅

在本文中
Baidu
map