Stepbar"
m (→Linear) |
|||
(8 intermediate revisions by 3 users not shown) | |||
Line 4: | Line 4: | ||
*Demonstration: | *Demonstration: | ||
− | *Java API: | + | *Java API: <javadoc>org.zkoss.zkmax.zul.Stepbar</javadoc> |
− | *JavaScript API: | + | *JavaScript API: <javadoc directory="jsdoc">zkmax.wgt.Stepbar</javadoc> |
− | + | {{ZK EE}} | |
+ | [ since 9.0.0 ] | ||
= Employment/Purpose = | = Employment/Purpose = | ||
− | Stepbar is a component for | + | Stepbar is a navigation component suitable for displaying the progress of a multi-step task. |
= Example = | = Example = | ||
+ | |||
+ | [[File:Stepbar-example.png]] | ||
<source lang="xml" > | <source lang="xml" > | ||
− | <zk | + | <zk> |
− | + | <stepbar linear="false" activeIndex="2" width="600px"> | |
<step title="First Step" iconSclass="z-icon-home"/> | <step title="First Step" iconSclass="z-icon-home"/> | ||
<step title="Second Step" complete="true" /> | <step title="Second Step" complete="true" /> | ||
Line 22: | Line 25: | ||
</zk> | </zk> | ||
</source> | </source> | ||
+ | |||
+ | = 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 = | = Properties = | ||
Line 28: | Line 36: | ||
The index of the active step. | The index of the active step. | ||
(Default: 0) | (Default: 0) | ||
+ | |||
+ | == ActiveStep == | ||
+ | The active step object. | ||
+ | (Default: first step) | ||
== Linear == | == Linear == | ||
− | Set whether the steps in this stepbar are displayed by order. | + | Set whether the steps in this stepbar are displayed in order. |
+ | |||
+ | Non-linear means users can toggle the active steps easily by clicking on any step even if the step is not the next one in the sequence. In linear mode, they can only activate in order. | ||
+ | |||
+ | [[File:Stepbar-linear.gif]] | ||
== Model == | == Model == | ||
The step model associated with this stepbar. | The step model associated with this stepbar. | ||
+ | |||
+ | An existing <javadoc>org.zkoss.zul.ListModelList</javadoc> can be wrapped into a <javadoc>org.zkoss.zkmax.zul.DefaultStepModel</javadoc> for Stepbar to use. | ||
== StepRenderer == | == StepRenderer == | ||
− | The renderer | + | The renderer used to render each step. |
+ | |||
+ | Implement yourown <javadoc>org.zkoss.zkmax.zul.StepRenderer</javadoc> to handle how data renders to a Step object. | ||
== WrappedLabels == | == WrappedLabels == | ||
Set whether the labels in children steps are wrapped. | Set whether the labels in children steps are wrapped. | ||
(Default: false) | (Default: false) | ||
+ | |||
+ | true: | ||
+ | [[File:Stepber-WrappedLabels.png]] | ||
+ | |||
+ | false: | ||
+ | [[File:Stepbar-example.png]] | ||
= Supported Events = | = Supported Events = | ||
Line 53: | Line 79: | ||
|} | |} | ||
− | + | *Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]] | |
− | *Inherited Supported Events: [[ZK_Component_Reference/Base_Components/ | ||
= Supported Children = | = Supported Children = | ||
− | *[[ZK_Component_Reference | + | *[[ZK_Component_Reference/Supplementary/Stepbar/Step | Step]] |
= Use Cases = | = Use Cases = | ||
Line 78: | Line 103: | ||
| 9.0.0 | | 9.0.0 | ||
| November, 2019 | | November, 2019 | ||
− | | [ | + | | [https://tracker.zkoss.org/browse/ZK-4375 ZK-4375]: Provide a stepbar component |
|} | |} | ||
{{ZKComponentReferencePageFooter}} | {{ZKComponentReferencePageFooter}} |
Revision as of 03:24, 19 November 2019
Stepbar
- Available for ZK:
[ since 9.0.0 ]
Employment/Purpose
Stepbar is a navigation component suitable for displaying the progress of a multi-step task.
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>
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 in order.
Non-linear means users can toggle the active steps easily by clicking on any step even if the step is not the next one in the sequence. In linear mode, they can only activate in order.
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)
Supported Events
Event: Event
Represents an event caused by a user's selection changed at the client. |
- Inherited Supported Events: XulElement
Supported Children
* Step
Use Cases
Version | Description | Example Location |
---|---|---|
Version History
Version | Date | Content |
---|---|---|
9.0.0 | November, 2019 | ZK-4375: Provide a stepbar component |