CODEWITHSUNDEEP
htmlcssangular-material
gaus shaikh
gaus shaikh

Reputation: 145

How to customize Angular Material stepper component showing label at the top?

I'm using Angular Material stepper. I found stepper label position left, bottom. I want to stepper label position top of the stepper and stepper circle icon shown below. Here is the stepper example for label position bottom.

stepper-label-position-bottom-example.html

Upvotes: 3

Views: 15922

Answers (3)

Martin
Martin

Reputation: 16300

It is actually much simpler.

In your global styles (styles.css) just add:

.mat-step-header {
  flex-direction: column;
}

Stackblitz link: https://stackblitz.com/angular/rlqdnyggyedo

Upvotes: 2

RGhanbari
RGhanbari

Reputation: 134

Unfortunately I couldn't find any attribute for labelPosition="bottom" in angular-material-stepper.
but it can help you

<mat-horizontal-stepper ngClass="mat-stepper-label-position-top"
....
</mat-horizontal-stepper>

In style.css add this code

.mat-stepper-label-position-top .mat-horizontal-stepper-header{ flex-direction: column-reverse !important; }

.mat-stepper-label-position-top .mat-horizontal-stepper-header .mat-step-label{ height: 48px; }

.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before, .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after{ bottom: 36px !important; top:unset !important; }

Upvotes: 1

codeuix
codeuix

Reputation: 1406

That option is not given by angular material team, you can fixed that problem using custom css.

/** custom CSS as per your :required */
::ng-deep .mat-horizontal-stepper-header {
    box-sizing: border-box;
    flex-direction: column-reverse !important;
    height: auto;
    padding: 24px;
}
::ng-deep .mat-horizontal-stepper-header .mat-step-label {
    padding: 0px 0px 16px !important;
}
::ng-deep .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before, ::ng-deep .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after{
    top: 68px !important;
}

Stackblitz link goes here

Upvotes: 7

Related Questions