角度材质复选框对齐答案

【问题标题】：Angular Material checkbox alignment角度材质复选框对齐
【发布时间】：2021-03-16 09:26:42
【问题描述】：

我有一个无法解决的对齐问题。我正在使用 Angular Material 复选框组件来显示选项列表，用户可以单击它们并选择多个选项。一切正常，但我面临一些我真的无法解决的风格问题。

Code Sample on StackBlitz

最后我想要的是将所有复选框对齐在可用空间的右侧。

有没有人可以解决这个问题？

【问题讨论】：

解决此问题的一种简单方法是使用mat-selection-list（没有波纹），其中复选框已在右侧对齐：Example on StackBlitz

标签： css angular checkbox

【解决方案1】：

将其添加到您的 css 中即可：

::ng-deep .mat-checkbox-inner-container {
  margin-right: 0 !important;

}

您需要使用 !important 或通过在复选框上添加一个 id 并在选择器中使用它来增加选择器的特异性。

【讨论】：

【解决方案2】：

解决此问题的一种简单方法是使用 Angular Material 的 mat-selection-list (Angular Material list API reference docs)，然后排除其波纹效果，其中复选框已在右侧对齐。

组件.ts

testItems: string[] = ['Test 1', 'Test 2', 'Test 3', 'Test 4', 'Test 5'];

component.html

<mat-selection-list [disableRipple]="true" #item>
  <mat-list-option *ngFor="let test of testItems">
    {{test}}
  </mat-list-option>
</mat-selection-list>

这样做的好处是您不必处理默认的 mat-checkbox 样式，并且 mat-selection-list 也是一个 Angular 组件，从而产生 example on StackBlitz。

StackBlitz 的结果：

【讨论】：

谢谢！这就是我要找的！
@MiteTashkov 不客气。请将答案标记为已批准，以便其他人可以从中受益。