Angular Material Stepper component showing label at the bottom

3
votes

Using Angular Material Stepper component, how to make a stepper that looks like this sample. I want to make the stepper label appear at the bottom of the step number as shown in the sample.

I tried going through the documentations but there doesn't seem to be an option that does this.

2
angularangular-material
Pure code-writing requests are off-topic on Stack Overflow — we expect questions here to relate to specific programming problems — but we will happily help you write it yourself! Tell us what you've tried, and where you are stuck. This will also help us answer your question better. Posting a Minimal, Complete, and Verifiable example (MCVE) that demonstrates your problem will help you get better answers. – coreuter
@coreuter this is not a code-writing request. Request you to please read and understand my question before underrating it. Thank you. – Temp O'rary
I've placed my comment prior to your edit (which did change the meaning of your question). Since someone down-voted your question and up-voted my comment, that person must have thought the same. Same with the person answering with the copy-paste of the docs. Instead of accusing me of not being able to read and understand your question, a comment like "I've modified my question, could you please check again" would have been nicer... but then, since I neither down-voted nor flagged your question I can't do anything to make you feel better right now. – coreuter

2 Answers

4
votes

Afaik there is no native option to do this at the moment, like you said. What you could try is to use some CSS to style the elements as you wish.

I've just tried it and created this stackblitz. What I've used is only some CSS to overwrite the current styles to make the stepper look like in your example:

.mat-horizontal-stepper-header-container{
  margin-bottom: 20px; 
}

.mat-horizontal-stepper-header{ 
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin-bottom: -15px;
}

.mat-step-label{
  position: relative;
  top: 10px;
}

.mat-stepper-horizontal-line{
 margin: 0 -30px !important;
}

.mat-horizontal-stepper-header .mat-step-icon, .mat-horizontal-stepper-header .mat-step-icon-not-touched{
  margin-right: 0 !important;
}

It's not that elegant, but it seems to work.

If this is what you are looking for you should do some thorough testing with longer/shorter labels and different screen sizes.

2
votes

Now it's possible to define the position of the label for MatHorizontalStepper with the labelPosition property. Note that "end" is the default value, while "bottom" will place it under the step icon instead of at its side. E.g.:

<mat-horizontal-stepper labelPosition="bottom">
  <!-- content -->
<mat-horizontal-stepper>