htmlcssangularangular-materialmat-stepper

Angular Material: vertical mat-stepper from bottom to top

I would like to build something like a status display with the help of the material component mat-stepper (using vertical orientation). I also would like to have the vertical steps go from bottom to top instead of top to bottom. However I haven't found something to make the steps go from bottom to top. Is there any property for this or is this maybe possible using CSS? To hardcode it in the html is not an option for me because I want to add steps dynamically.

Example: (vertical orientation)

Step 1

Step 2

Step 3

What I want:

Step 3

Step 2

Step 1

Solution

  • you can do this using css and reverse the order, though you may need to adjust the styling for the rest of the elements to align it to your requirement

    .mat-stepper-vertical {
  display: flex;
  flex-direction: column-reverse;
}