Steps - ZUI Documentation

Summary

The steps pattern should be used to visualize the steps in a wizard.

There are no attributes defined for this pattern.

Name	Description
`zui-steps`	The `zui-steps` turns an ordered list into a steps overview.
`zui-steps-step`	The `zui-steps-step` class should be set on a list item element. It tells the pattern that the list item is a single step and makes the step active by default. All steps that come after the `zui-steps-current` will be inactive.
`zui-steps-step-current`	The `zui-steps-step-current` class is a trigger to tell the pattern that all `zui-steps-step` that come after this element will be inactive.

Example

Step 1
Step 2
Step 3
Step 4
Step 5

Markup

<ol class="zui-steps">
    <li class="zui-steps-step" style="width: 20%">
        <span>Step 1</span>
    </li>
    <li class="zui-steps-step" style="width: 20%">
        <span>Step 2</span>
    </li>
    <li class="zui-steps-step zui-steps-step-current" style="width: 20%">
        <span>Step 3</span>
    </li>
    <li class="zui-steps-step" style="width: 20%">
        <span>Step 4</span>
    </li>
    <li class="zui-steps-step" style="width: 20%">
        <span>Step 5</span>
    </li>
</ol>