我有两种情况:
一,是我使用 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-->
最佳答案
也许你可以试试 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
关于angular - 如何垂直对齐不在表单组中的 Angular + Material 垫复选框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51572878/