Это расширение @ angular-material-extensions / прочность пароля действует как дива.Я помещаю все в div скажем style="text-align:center;"
, и это буквально работает.Но я также получил класс CSS для ширины каждого компонента, и это не будет применяться.
Кроме того, если я покажу все требования, это размервсего степпера.Панель просто не принимает полный размер, потому что я уже использовал немного CSS там, но это не может быть реальным решением.
<mat-horizontal-stepper linear="true" #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="registerForm" class="form" novalidate>
<div style="text-align:center;">
<ng-template matStepLabel>{{ 'REGISTRATION.STEPPER_LOGIN' | translate }}</ng-template>
<mat-card-subtitle>
<mat-slide-toggle [(ngModel)]="showDetails" [ngModelOptions]="{standalone: true}">
{{ 'REGISTRATION.PASSWORDREQUIREMENTS' | translate }}</mat-slide-toggle>
</mat-card-subtitle>
<mat-form-field class="full-width" [color]="passwordComponent.color">
<mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>
<input matInput maxlength="25" [type]="toggle.type" required
placeholder="{{ 'REGISTRATION.PASSWORD' | translate }}" #password formControlName="password"
type="password" />
<mat-hint style="color: red" *ngIf="capslockOn" align="start" aria-live="polite">
<strong>{{ 'CAPSLOCK' | translate }}</strong>
</mat-hint>
<mat-hint align="end" aria-live="polite">
{{password.value.length}} / 25
</mat-hint>
<mat-error *ngIf="formErrors.password" class="form__error">{{ formErrors.password }} </mat-error>
</mat-form-field>
<mat-password-strength class="full-width" #passwordComponent min="4" [password]="password.value">
</mat-password-strength>
<mat-password-strength-info class="full-width" *ngIf="showDetails" [passwordComponent]="passwordComponent">
</mat-password-strength-info>
</div>
</form>
</mat-step>
Используемые мной классы CSS:
::ng-deep .mat-progress-bar {
width: 27% !important;
}
.full-width {
width: 80%;
}