Topic: Angular how to change step color in stepper
Expected behavior Looking for a method to change the step colour in the angular stepper component, cannot see how to do this.
Actual behavior Please provide a code sample to clearly explain how to change the step colour for a angular stepper
Resources (screenshots, code snippets etc.)
You can change the step color by overriding its CSS styles. Here is an example for inactive and active step (you need to add those styles to your global styles.scss file):
// Horizontal inactive
mdb-stepper .card-body ul.stepper.horizontal .step .step-title:before {
background-color: black;
}
// Horizontal active
mdb-stepper .card-body ul.stepper.horizontal .step.active .step-title:before {
background-color: green;
}
// Vertical inactive
mdb-stepper .card-body ul.stepper .step:before {
background-color: black;
}
// Vertical active
mdb-stepper .card-body ul.stepper .step.active:before {
background-color: green;
}
abhinov free commented 3 years ago
Thanks, the vertical does not seem to work?
// active
mdb-stepper .card-body ul.stepper.vertical .step.active .step-title:before {
background-color: green;
}
Arkadiusz Idzikowski staff commented 3 years ago
I edited my answer and added an example for vertical steppers.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 9.4.0
- Device: Mac
- Browser: Firefox
- OS: Mac OS
- Provided sample code: No
- Provided link: No
Moliere Peronneau free commented 3 years ago
moliere perone est un