mat-stepper: Allow custom CSS classes for mat-step-header
See original GitHub issuePlease describe the feature you would like to request.
Please add API to add custom css classes to mat-step-header
.
What is the use-case or motivation for this proposal?
We want to set custom cursor for disabled steps in linear stepper.
Is there anything else we should know?
Disabled steps have the same hover and click animations, it would be nice to be able to customize them. But I guess there is other issue for that. And custom css classes would also help with this.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:34
- Comments:9
Top Results From Across the Web
Angular Material Stepper: Styling the Active Header
The css is ok but it applies to all the steps but i only want it to apply to the selected header. There...
Read more >Stepper - Angular Material
Emits when the user has attempted to move away from the step. Template for step content. Whether user has attempted to move away...
Read more >Angular Mat Stepper Full Height - StackBlitz
Class. Enum. Rename. Delete. demo.component.css. Rename. Delete. demo.component.html. Rename. Delete. demo.component.ts. Rename. Delete. header. New File.
Read more >How to change the angular material mat stepper label color?
<ng-template matStepLabel> <div class="stepper-label"> Name of the label </div> </ng-template>. Now in your css file use the "stepper-label" to add styling:
Read more >Mat-stepper disable step
Please add API to add custom css classes to mat-step-header. What is the use-case or motivation for this proposal? We want to set...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I found a way how to disable a step. The material team should add a disable option on
<mat-step ...>
here is a working STACKBLITZ
I (miss)use the
aria-labelledby
input.in css:
Yes please add this feature. I would like to apply styles to the active step’s header via a class. I’ve done it like this, but it’s kind of a hack
.mat-step-header[aria-selected="true"] { background-color: rgba(0, 0, 0, 0.04) !important }