CE
PE
EE

since 9.0.0

Employment/Purpose

A step is used for displaying user navigation, it should be placed inside a Stepbar and shouldn’t be used without a Stepbar.

Common Use Cases

Marking a Step as Complete

Set complete="true" to visually indicate that a step has been finished. This is typically updated programmatically as the user advances through the workflow.

<stepbar width="600px">
    <step title="Personal Info" complete="true"/>
    <step title="Review" complete="true"/>
    <step title="Submit"/>
</stepbar>

Flagging a Step With an Error

Set error="true" to highlight that a step requires attention. When both complete and error are set on the same step, the error state takes visual precedence.

<stepbar width="600px">
    <step title="Upload File" complete="true"/>
    <step title="Validate" error="true"/>
    <step title="Process"/>
</stepbar>

Using a Custom Icon

Use iconSclass to replace the default step icon with any ZK icon font class. The custom icon overrides both the complete and error icons when set.

<stepbar width="600px">
    <step title="Account" iconSclass="z-icon-user"/>
    <step title="Payment" iconSclass="z-icon-credit-card"/>
    <step title="Confirm" iconSclass="z-icon-check"/>
</stepbar>

Example

Stepbar example

<zk>
    <stepbar linear="false" activeIndex="2" width="600px">
        <step title="First Step" iconSclass="z-icon-home"/>
        <step title="Second Step" complete="true" />
        <step title="Third Step" error="true" />
    </stepbar>
</zk>

Properties

Complete

Whether this step is completed. (Default: false)

The default visual style: Step complete default

Error

Whether this step is in error. (Default: false)

The default visual style: Step error default

The priority of error is higher than complete. If both properties are set, the result will be an error state visually.

IconSclass

Set the icon CSS class to apply a custom icon.

If you set this property, it will override the complete and error icons accordingly.

center 

    <stepbar width="800px">
        <step title="Custom Step icon" iconSclass="z-icon-star-o"/>
        <step title="Custom Error" error="true" iconSclass="z-icon-bug"/>
        <step title="Custom Complete" iconSclass="z-icon-home"/>
    </stepbar>

Please read /zk_component_ref/labelimageelement#IconSclass to know more available build-in icons.

Title

Set the title (label) of each step. (Default: empty)

Supported Events

Name Event Type Description
(Inherited) XulElement See parent component for supported events

Supported Children

* None