踏步机 MDB Pro component

步进器-Bootstrap 5和Material Design 2.0组件

步进器是将内容显示为由用户里程碑定义的过程的组件。 对于各种您不希望害怕的注册表格,这是一个很好的解决方案 有很多领域和问题的用户。

注意:阅读 API 标签以找到所有可用选项,然后 高级定制


基本例子

您可以使用以下命令自动初始化步进器组件 data-mdb-stepper =“ stepper”

  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

使用外部元素更改步骤

要转到下一步或上一步,可以使用 nextStep previousStep 方法。您也可以使用 通过输入步骤索引来 changeStep 方法

  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

线性步进

如果要在继续下一步之前使用基本验证,则可以进行设置 data-mdb-stepper-linear="true"

  • 1 step1
    invalid
  • 2 step2
    invalid
  • 3 step3
    invalid

没有可编辑的步进器

你可以设定 data-mdb-stepper-no-editable="true" 以防止您编辑 再次完成步骤

  • 1 step1
    invalid
  • 2 step2
    invalid
  • 3 step3
    invalid

立式步进机

data-mdb-stepper-type="vertical" 使用垂直视图

  • 1 step1
    Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
  • 2 step2
    Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
  • 3 step3
    Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.

移动踏步机

data-mdb-stepper-type="mobile" 使用移动视图

  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

移动步进器进度条

如果步进器包含四个以上的步骤,则默认情况下将显示进度条 而不是点。您可以使用 stepper-mobile-bar-breakpoint 属性

  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

可选步骤

您可以通过添加将步骤标记为可选步骤 data-mdb-stepper-optional="true" 对此

  • 1 step1
    Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
  • 2 step2
    Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
  • 3 step3
    Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.

自定义图标

如果要使用图标而不是步骤号,可以将其放在里面 <span class="stepper-head-text"></span>

  • step1
    invalid
  • step2
    invalid
  • step3
    invalid

在较小的屏幕上切换为垂直或移动

如果您想将视图从水平视图更改为垂直视图或在较小的屏幕上移动视图,则可以 可以使用 data-mdb-stepper-vertical-breakpoint data-mdb-stepper-mobile-breakpoint 属性,用于指定位于的像素数 步进应更改为垂直或移动。您可以将浏览器窗口调整为 测试一下。

  • step1
    invalid
  • step2
    invalid
  • step3
    invalid

大事记

在成功进行步骤验证之后,失败的步骤验证之后,Stepper会发出事件,并且 然后再进行下一步。检查浏览器控制台并尝试更改步骤以查看 结果。

  • 1 step1
    invalid
  • 2 step2
    invalid
  • 3 step3
    invalid

添加自定义验证

您可以使用 onChangeStep.mdb.stepper 事件以使用您自己的验证。

  • 1 step1
    Password should have 5 or more characters
  • 2 step2
    invalid
  • 3 step3
    invalid

踏步机 - API


用法

通过数据属性


        <ul class="stepper" data-mdb-stepper="stepper">
          <!-- ... -->
        </ul>
      

通过JavaScript


        const stepper = new mdb.Stepper(document.getElementById('stepper'));
      

通过jQuery

注意:默认情况下,MDB 包含jQuery,并且您拥有 自行添加到项目中。

 $('#stepper').stepper(); 

选件

Name Data attribute Type Default Description
stepperType data-mdb-stepper-type String 'horizontal' Set stepper view
stepperLinear data-mdb-stepper-linear Boolean false Set to true to use the linear stepper
stepperNoEditable data-mdb-stepper-no-editable Boolean false Set to true to block editing of the completed step
stepperActive data-mdb-stepper-active String '' Set a custom active class
stepperCompleted data-mdb-stepper-completed String '' Set a custom completed class
stepperInvalid data-mdb-stepper-invalid String '' Set a custom invalid class
stepperDisabled data-mdb-stepper-disabled String '' Set a custom disabled class
stepperVerticalBreakpoint data-mdb-stepper-vertical-breakpoint Number 0 Set the resolution below which the stepper will switch to vertical
stepperMobileBreakpoint data-mdb-stepper-mobile-breakpoint Number 0 Set the resolution below which the stepper will switch to mobile
stepperMobileBarBreakpoint data-mdb-stepper-mobile-bar-breakpoint Number 4 Set the step limit after which the progress bar will appear in the mobile view instead of the dots

方法

Name Description Example
changeStep Switch to the step given as the parameter stepper.changeStep()
nextStep Switch to the next step stepper.nextStep()
previousStep Switch to the previous step stepper.previousStep()

        const myStepperEl = document.getElementById('stepper');
        const stepper = new mdb.Stepper(myStepperEl);
        stepper.nextStep();
      

大事记

Name Description
onChangeStep.mdb.stepper Event emitted before the step change
onValid.mdb.stepper Event emitted after successful step validation
onInvalid.mdb.stepper Event emitted after unsuccessful step validation

        const stepOne = document.querySelectorAll('.stepper .stepper-step')[0];
        stepOne.addEventListener('onChangeStep.mdb.stepper', (e) => {
          // do something...
        });
      

进口

MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:


        import { Stepper } from 'mdb-ui-kit';