Steps theming

UI Components for Angular
Post Reply
azseza
Posts: 1
Joined: 10 Mar 2023, 18:28

10 Mar 2023, 18:30

How can we change the style class of the completed step in the steps module in primengs.
No such information in the documentation
As i understand there used to be a directive for that in the v 7.
Can somebody help?
:wq

Seenamartin
Posts: 5
Joined: 12 Dec 2022, 13:28

15 Mar 2023, 12:20

azseza wrote:
10 Mar 2023, 18:30
How can we change the style class of the completed step in the steps module in primengs.
No such information in the documentation
As i understand there used to be a directive for that in the v 7.
Can somebody help?
:wq
Hello,
I am not expert but I just want to say that In PrimeNG, you can change the style class of the completed step in the steps module by using the styleClass property of the p-steps component.

Here's an example code snippet to change the style class of the completed step to "custom-complete-style":

Code: Select all

<p-steps [model]="items" styleClass="custom-complete-style"></p-steps>
In this example, "items" is an array of step items that are defined in the component.

You can also use the ngClass directive to dynamically change the style class of the completed step based on a condition. Here's an example:

Code: Select all

<p-steps [model]="items" [ngClass]="{'custom-complete-style': isStepCompleted}"></p-steps>
In this example, the isStepCompleted property is a boolean value that indicates whether the step is completed or not. When isStepCompleted is true, the custom-complete-style class will be applied to the completed step. Optonline Email

Note that the styleClass property and ngClass directive can be used to apply styles to other parts of the steps module as well, such as the active step and the labels of the steps.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 6 guests