Stepbar"

From Documentation
Line 28: Line 28:
 
= Supported Browsers =
 
= Supported Browsers =
 
It is compatible with browsers that fully supports CSS flexbox model, like IE 11, Edge, Firefox, Opera, Chrome and Safari.
 
It is compatible with browsers that fully supports CSS flexbox model, like IE 11, Edge, Firefox, Opera, Chrome and Safari.
 +
 
IE10 is not supported as it only partially supports flexbox.
 
IE10 is not supported as it only partially supports flexbox.
  

Revision as of 03:20, 19 November 2019

Stepbar

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png
[ since 9.0.0 ]

Employment/Purpose

Stepbar is a navigation component suitable for displaying the progress of a multi-step task.

Example

Stepbar-example.png

<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>

Supported Browsers

It is compatible with browsers that fully supports CSS flexbox model, like IE 11, Edge, Firefox, Opera, Chrome and Safari.

IE10 is not supported as it only partially supports flexbox.

Properties

ActiveIndex

The index of the active step. (Default: 0)

ActiveStep

The active step object. (Default: first step)

Linear

Set whether the steps in this stepbar are displayed by order.

Non-linear means users can toggle the active steps easily by clicking the step. In linear, they can't.

Stepbar-linear.gif

Model

The step model associated with this stepbar.

An existing ListModelList can be wrapped into a DefaultStepModel for Stepbar to use.

StepRenderer

The renderer used to render each step.

Implement yourown StepRenderer to handle how data renders to a Step object.

WrappedLabels

Set whether the labels in children steps are wrapped. (Default: false)

true: Stepber-WrappedLabels.png

false: Stepbar-example.png

Supported Events

Name
Event Type
onChange
Event: Event

Represents an event caused by a user's selection changed at the client.

Supported Children

* Step

Use Cases

Version Description Example Location
     

Version History

Last Update : 2019/11/19


Version Date Content
9.0.0 November, 2019 ZK-4375: Provide a stepbar component



Last Update : 2019/11/19

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.