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