Stepper

Create steps control with special Metro UI component.

About

If you need to create a control with steps, you can use Metro UI component stepper. To create stepper, add role with attribute data-role="stepper" to element and define options with other data attributes.


                    <div data-role="stepper"></div>
                

View mode

You can use three view mode to display step marker: square (default), cycle and diamond. To set view mode use attribute data-view="...".


                    <div data-role="stepper" data-view="square"></div>
                    <div data-role="stepper" data-view="cycle"></div>
                    <div data-role="stepper" data-view="diamond"></div>
                

Steps count

You can set steps count with attribute data-steps and set current step with attribute data-step.


                    <div data-role="stepper" data-steps="5" data-step="3"></div>
                

Events

When stepper works, his generate events. You can use a callback for these events to interact with a stepper.

Event Data-* Desc
onStep(step, element) data-on-step Fired when step was changed
onStepClick(step, element) data-on-step-click Fired when user click on the step (required set attribute data-click-step="true")
onStepperCreate(element) data-on-stepper-create Fired when stepper created

Methods

Stepper component has any methods to interact with it:

  • next() - go to next step
  • prev() - go to previous step
  • fist() - go to first step
  • last() - go to last step
  • toStep(step) - go to required step (from 1 to steps count)

                    <div data-role="stepper" data-steps="5" id="stepper"></div>

                    <div class="d-flex flex-justify-center mt-4">
                        <button class="button m-1" onclick="stepperMethod('first')">First</button>
                        <button class="button m-1" onclick="stepperMethod('prev')">Prev</button>
                        <button class="button m-1" onclick="stepperMethod('next')">Next</button>
                        <button class="button m-1" onclick="stepperMethod('last')">Last</button>
                    </div>

                    <script>
                        function stepperMethod (m){
                            var stepper = Metro.getPlugin('#stepper','stepper');
                            stepper[m]();
                        }
                    </script>
                

Customize

You can customize stepper with special attributes: data-cls-stepper, data-cls-step, data-cls-complete, data-cls-current.


                    <div data-role="stepper"
                         data-steps="5"
                         data-step="3"
                         data-view="diamond"
                         data-cls-step="rounded"
                         data-cls-complete="bg-pink"
                         data-cls-current="bg-red">
                    </div>