89
PrimeFaces Steps
This components is an indicator for the steps in a workflow. It indicates that at what step we are right now. It is used to show current step in multi-steps application.
The <p:steps> component is used to create steps indicator in the JSF application. It has various important attributes that are tabled below.
Steps Attributes
Attribute | Default value | Type | Description |
---|---|---|---|
id | null | String | It is a unique identifier of the component. |
rendered | true | Boolean | It takes boolean value to specify the rendering of the component. |
model | null | MenuModel | It is used to build menu dynamically. |
style | null | String | It is used to set inline style of the component. |
activeIndex | 0 | Integer | It is an index of the active tab. |
widgetVar | null | String | It is used to set name of the client side widget. |
readonly | true | Boolean | It is used to make component readonly. |
Skinning
Following is the table of structural style classes.
Style Class | Applies |
---|---|
.ui-steps | It applies on main container element. |
.ui-steps-item | It applies on step element. |
.ui-steps-name | It applies on name of the step. |
.ui-steps-item | This class is used for number of the step. |
Example
Here, in the following example, we are implementing <p:steps> component. This example contains the following files.
JSF File
// steps.xhtml
Output:
If we change activeIndex = 3, it produces the following output.
Next TopicPrimeFaces AreaChart