向导步进

向导组件的主要元素之一是步进。向导组件使用Telerik UI的Blazor步进在内部。

的参数WizardStep暴露以自定义内部步进的以下属性:

• 步进器常规设置

  • StepType
  • 线性流

• 个人步进设置

  • 指标
  • 标签
  • 可选
  • 禁用
  • 有效的

一般步进设置

的参数来设置所需的内部步进的一般设置WizardStepperSettings标签下WizardSettings标签包括StepType而且线性流。

StepType

与steper组件非常相似，向导的内部steper也提供了两个显示模式对于这些步骤。命令配置所需的显示模式StepType参数。WizardStepperSettings它需要一个元素StepperStepType枚举:

• 步骤(默认)- step将同时呈现指示器和标签
• 标签步进只会渲染标签

         
Content for Wizard Step 1
     
Content for Wizard Step 2
     
Content for Wizard Step 3
     

线性流

的线性类的功能匹配步进元件线性流动．它允许您对它进行配置，以便在进行下一步之前需要完成上一步。用户将能够一次走一步(后退或向前)。

的“向导步进”的“线性流”可以启用/禁用线性参数。WizardStepperSettings．它需要保龄球默认值为真正的．

@*禁用向导的线性流*@ 
   < wizardstepersettings线性="false">      
 Wizard Content Step 1
          
Content for WizardStep 3
     

个人步进设置

指标

控件的步骤指示器中呈现的内容可以通过以下参数配置WizardStep公开:

• 文本-字符串—步骤指示符文本
• 图标-字符串-指定将放在步进指示器内的图标。
• IconClass-字符串-定义所需第三方字体图标的CSS类。
• ImageUrl-字符串-定义url所期望的光栅图像。

对象的呈现应用的优先级和规则与步进元件指示器．

@*配置向导指示灯步骤*@ 
     
 Wizard Content Step 1
     
 Wizard Content Step 2
     
 Wizard Content Step 3
    
Content for WizardStep 4
     

标签

向导步进器允许您为后面的相应步骤指示器设置标签步进元件标签练习。方法定义所需的标签标签参数的WizardStep暴露。如果不将值设置为标签参数时，将不会为相应的步骤指示器呈现标签。

@*配置向导的标签步骤*@ 
     
 Wizard Content Step 1
     
 Wizard Content Step 2
        

可选

同样的步进组件可选属性，向导步进也支持。

要将向导步骤标记为可选，请设置可选参数。WizardStep来真正的(默认值为假)．此配置通过在相应步骤下面呈现“(可选)”文本，努力直观地通知用户某个步骤不需要。它没有内置的功能来跳过向导步骤，如果线性流启用。

@*设置一个可选的向导步骤*@ 
     
 Wizard Content step 1
     
 Wizard Content step 2
        
 WizardStep 4 Content 
     

禁用

属性后，向导步进器还允许将步骤标记为已禁用步进组件禁用财产．

属性可以禁用步骤禁用的参数WizardStep来真正的(默认值为假)．还可以根据应用程序逻辑切换其值，有条件地启用/禁用Wizard步骤。

此特性用于将所需步骤标记为已禁用，因此用户无法单击并选择它。如果线性流启用时，用户将不能跳过禁用的步骤并单击下一个启用的步骤。

如果下一步被禁用，当前步骤上的next按钮也将被标记为禁用，因此用户将无法单击它。

如果禁用上一步，则禁用“上一步”按钮。

@*设置一个禁用的向导步骤*@ 切换禁用预览步骤 
     
 Wizard Content step 1
     
 Wizard Content step 2
     
Content for WizardStep 3
     
Content for WizardStep 4
     
 @code{public bool IsDisabled {get;设置;} void ToggleDisabled() {IsDisabled = !}}

有效的

同样的步进组件验证功能，向导步进器还提供了为每个步骤设置验证逻辑的选项。

方法设置一个可视化指示步骤是否有效有效的参数。WizardStep．它接受bool吗?默认值为零．

您可以切换有效的参数值，以根据应用程序逻辑相应地呈现成功或错误图标。因为它是一个可视化的有效性指示器，所以它不会阻止用户在步骤之间导航。您可以使用有效的参数值执行逻辑以覆盖所需的场景(例如，如果当前步骤无效，则防止用户导航到下一步)。

@*有效和无效步骤的向导*@ 
     
 valid Step1 
     
 WizardStep Step2无效步骤
     
 Step 3的内容
     
 @code{public bool?IsStep1Valid {get;设置;}公共bool?IsStep2Valid {get;设置;} void OnChangeHandler1() {IsStep1Valid = true;} //如果当前步骤无效，则阻止用户进入下一个/上一个步骤void OnChangeHandler2(WizardStepChangeEventArgs args) {IsStep2Valid = false;if (IsStep2Valid == false){参数。IsCancelled = true; } } }

另请参阅

• 现场演示:向导配置