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>