Angular 材質復選框 alignment

Question

我有一個無法解決的小 alignment 問題。 我正在使用 Angular Material 復選框組件來顯示選項列表，用戶可以單擊它們並選擇多個選項。 一切正常，但我面臨着一些我真的無法解決的風格問題。

StackBlitz 上的代碼示例

最后我想要的是將所有復選框對齊在可用空間的右側。

有人對此有解決方案嗎？

Answer 1

將此添加到您的 css 將起作用：

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

}

您需要使用.important 或通過在復選框上添加一個 id 並在選擇器中使用它來增加您的選擇器特異性。

Answer 2

解決此問題的一種簡單方法是使用 Angular Material 的mat-selection-list （ Angular Material list API 參考文檔），然后排除其右側的波紋效果，其中復選框已對齊。

組件.ts

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

組件.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 組件，因此在StackBlitz 上有一個示例。

StackBlitz 的結果：