代码之家 › 专栏 › 技术社区 › Xalion

如何通过柔性布局使水平物料步进器居中?

angular-material-stepper angular-flex-layout angular-material

0

Xalion · 技术社区 · 6 年前

我尝试在我的项目中只使用flex布局,避免使用普通的CSS。我不知道如何使呼和浩里角材料步进器居中并获得良好的视野。我检查 margin: 0 auto; 而且工作正常。这是我的代码:

<mat-vertical-stepper [linear]="true" #stepper fxLayoutAlign="center center" fxLayout="column">
  <mat-step>
    <form>
      <ng-template matStepLabel>
        Fill out ballot name
      </ng-template>
      <mat-form-field>
        <input matInput placeholder="Ballot name">
      </mat-form-field>
      <div>
        <button mat-flat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>

  <mat-step>
    <form fxLayout="column">
      <ng-template matStepLabel>
        Select start and end time
      </ng-template>
      <mat-form-field>
        <input matInput [matDatepicker]="pickerStart" placeholder="Choose a start date">
        <mat-datepicker-toggle matSuffix [for]="pickerStart"></mat-datepicker-toggle>
        <mat-datepicker #pickerStart></mat-datepicker>
      </mat-form-field>
      <mat-form-field>
        <input matInput [matDatepicker]="pickerEnd" placeholder="Choose a end date">
        <mat-datepicker-toggle matSuffix [for]="pickerEnd"></mat-datepicker-toggle>
        <mat-datepicker #pickerEnd></mat-datepicker>
      </mat-form-field>
      <div fxLayoutGap="5px">
        <button mat-flat-button matStepperPrevious>Back</button>
        <button mat-flat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>

  <mat-step>
    <form>
      <ng-template matStepLabel>
        Enter a description of ballot
      </ng-template>
      <mat-form-field>
        <textarea matInput placeholder="Description"></textarea>
      </mat-form-field>
      <div fxLayoutGap="5px">
        <button mat-flat-button matStepperPrevious>Back</button>
        <button mat-flat-button (click)="stepper.reset()">Reset</button>
        <button mat-flat-button>Confirm</button>
      </div>
    </form>
  </mat-step>
</mat-vertical-stepper>

问题截图:

1 回复 | 直到 6 年前

1

0

G. Tranter 6 年前

每一步的宽度不同,所以您看到的结果是预期的。当水平居中垂直堆叠的元素时,较宽的元素将出现在较窄的元素之外。您要做的是使整个步进器居中,并使步进左对齐:

<div fxLayoutAlign="center center" fxLayout="column">

  <mat-vertical-stepper [linear]="true" #stepper>
    ...
  </mat-vertical-stepper>

</div>

StackBlitz