J'utilise le stepper Angular Material. J'ai trouvé la position de l'étiquette du stepper à gauche, en bas. Je veux placer l'étiquette du stepper en haut du stepper et icône de cercle pas à pas illustrée ci-dessous. Voici l'exemple du stepper pour la position de l'étiquette en bas.
3 Réponses :
Cette option n'est pas donnée par l'équipe angular material, vous pouvez résoudre ce problème en utilisant un CSS personnalisé.
/** 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;
}
Malheureusement, je n'ai trouvé aucun attribut pour labelPosition = "bottom" dans pas à pas angulaire de matériau .
mais cela peut vous aider
....
Dans style.css , ajoutez ce code
.mat-stepper-label-position-top .mat-horizontal-stepper-header {
flex-direction: colonne inversée! important;
}
.mat-stepper-label-position-top .mat-horizontal-stepper-header .mat-step-label {
hauteur: 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 {
en bas: 36px! important;
haut: non défini! important;
}
C'est en fait beaucoup plus simple.
Dans vos styles globaux (styles.css), ajoutez simplement:
.mat-step-header {
flex-direction: column;
}
Lien Stackblitz: https://stackblitz.com/angular/rlqdnyggyedo