angular - 如何垂直对齐不在表单组中的 Angular + Material 垫复选框？

Question

我有两种情况:

一，是我使用 FORM GROUP 和使用 angular 5 + Angular Material Design 的地方。

这是我的多个复选框的代码

<div *ngSwitchCase="'checkboxField'" class="checkbox-field">
  <div *ngIf="!field?.properties?.hideTitle">{{field?.properties.title}}</div>
    <div class="checkbox-label" *ngFor="let
         element of field?.elements">
         <mat-checkbox
        [value]="element?.properties.value"
        [disabled]="field?.properties.disabled"
        [checked]="isItemChecked(element?.properties.value)"
        (change)="onCheckboxChange(element?.properties.value);
        notifyFormOfChange($event);">
        {{element?.properties.title}}
    </mat-checkbox>
  </div>
</div>

有两种显示方式:

1) 横向
2) 垂直

垂直仅出现在我有多个复选框或单选按钮(我也需要修复)的表单组中。当我不使用表单组并简单地放置复选框或单选按钮时，我有一行 CBX 或 RB，它们之间没有空格。

当此属性设置为 true 时，我需要垂直堆叠 CHECKBOXES:

field.properties.stackVertically = true

我只能用 CSS 做到这一点。

这是表单组的 CSS

.row[_ngcontent-c30] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

而 HORIZONTAL 则没有这样的东西。

Switch VERTICAL 是一个选项“IF”这个

field.properties.stackVertically = true

这是我所说的两张照片:




更新到很棒的答案!!!

查看 SUCCESS 图像，这是上面集成了解决方案的代码。

我必须将解决方案放在第二行而不是我认为必须的位置。有点尝试和错误，但它有效!!!



现在这里是上面的代码和 KimCindy 的回答!谢谢!

  <div *ngSwitchCase="'checkboxField'" class="checkbox-field">
    ***<div class="cb-wrapper" [ngClass]="{'cb-vertical': field?.properties?.stackVertically }">***
         <div *ngIf="!field?.properties?.hideTitle">{{field?.properties.title}}</div>
      <div class="checkbox-label" *ngFor="let
           element of field?.elements">

           <mat-checkbox
          [value]="element?.properties.value"
          [disabled]="field?.properties.disabled"
          [checked]="isItemChecked(element?.properties.value)"
          (change)="onCheckboxChange(element?.properties.value);
          notifyFormOfChange($event);">
          {{element?.properties.title}}
      </mat-checkbox>
    </div>
  ***</div>***
</div><!--checkbox-->

Answer 1

也许你可以试试 ngClass 指示。

请看下面的例子:

HTML:

<div class="cb-wrapper" [ngClass]="{'cb-vertival': !tmp }">
<mat-checkbox>Check 1</mat-checkbox>
<mat-checkbox>Check 2</mat-checkbox>
<mat-checkbox>Check 3</mat-checkbox>
<div>

CSS:

.cb-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  flex-flow: row;
}

.mat-checkbox {
  margin-left:20px;
} 

.cb-vertival {
  flex-flow: column;
}

TS:

export class CheckboxLayoutExample {
tmp : boolean = false;
}

Blitz :
https://stackblitz.com/edit/angular-addm8z?file=app%2Fcheckbox-overview-example.css