Here is a code example I've forked from the official angular documentation for stepper: https://stackblitz.com/edit/angular-tth817
In my fork, I'm trying to achieve a couple of things:
I want to hide the stepper header.
.mat-horizontal-stepper-header-container
(actually just adding a border to it). I forced the content of the last step to be tall. There, you can see that the buttons on each step no longer align. What I would like to do is have the stepper content fill its parent (.container
, the thick red dashed line), and then I can use flex box to get the buttons to all align at bottom.
mat-stepper-horizontal, mat-stepper-horizontal
rules, and these don't apply either.Can you tell me:
Why aren't these rules appearing at all? (F12 developer tools, shows all the other rules, but not that ones that are stepper specific). What's going on here?
Generally - what philosophy should I use for styling the stepper? The best alternative I can think of, is to put a content div inside each step, and size it with vh and vw or something.
How would I get rid of the header?
There are two possible approaches. One is using a single form for stepper, and the other is using a different form for each step. Alternatively, if you don't want to use the Angular forms, you can pass in the completed property to each of the steps which won't allow the user to continue until it becomes true.
Angular Material uses the least specific selectors possible for its components to make it easy to override them. More specific styles will take precedence over less specific styles. So in our case, we have to add more specificity to overwrite our AM styles. The best way to do so is to use the name of our component’s selector.
The only difference is the orientation of stepper. You are now done. mat-horizontal-stepper selector can be used to create a horizontal stepper, and mat-vertical-stepper can be used to create a vertical stepper. mat-step components need to be placed inside either one of the two stepper components.
A stepper is a wizard-like workflow that divides content into logical steps The base CDK version of the stepper primarily manages which step is active. This includes handling keyboard interactions and exposing an API for advancing or rewinding through the workflow.
From the angular docs:
The styles specified in @Component metadata apply only within the template of that component.
(https://angular.io/guide/component-styles#style-scope)
In other words, adding styling in this file will not affect child components.
Please note that Angular provide special CSS selectors you can use to select children components. These are technically deprecated, but there is currently no mention of what will take their place.
::ng-deep .mat-horizontal-stepper-header-container {
border: solid 1px red;
}
::ng-deep mat-stepper-horizontal, mat-stepper-horizontal {
border: dashed 1px blue;
padding: 1em;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With