Angular Material 中切換按鈕組中按鈕的對齊方式

Question

我正在嘗試制作一個里面有幾個材料按鈕的材料工具欄。 我想在左側對齊第一個按鈕並在工具欄右側對齊三個按鈕。 我正在嘗試通過 CSS 實現這一點，但無法實現。

<mat-toolbar color="primary">
    <mat-toolbar-row>
      <mat-button-toggle-group #group="matButtonToggleGroup">
        <mat-button-toggle value="left" aria-label="Text align left">
          <mat-icon>format_align_left</mat-icon>
        </mat-button-toggle>
        <mat-button-toggle value="center" aria-label="Text align center">
          <mat-icon>format_align_center</mat-icon>
        </mat-button-toggle>
        <mat-button-toggle value="right" aria-label="Text align right">
          <mat-icon>format_align_right</mat-icon>
        </mat-button-toggle>
        <mat-button-toggle value="justify" aria-label="Text align justify">
          <mat-icon>format_align_justify</mat-icon>
        </mat-button-toggle>
      </mat-button-toggle-group>
</mat-toolbar-row>
</mat-toolbar>

<div class="example-selected-value">Selected value: {{group.value}}</div>

Answer 1

您需要調整一些 flexbox 樣式以使其工作。 當前實現使用display: inline-flex; , 而它需要display: flex; . 接下來，需要將第二個切換（ .mat-button-toggle:nth-child(2) ）推到右側。 這可以通過margin-left: auto來實現。

SCSS代碼

.mat-button-toggle-group.mat-button-toggle-group {
  display: flex;

  .mat-button-toggle:nth-child(2) {
    margin-left: auto;
  }
}

已編譯的 CSS 代碼

.mat-button-toggle-group.mat-button-toggle-group {
  display: flex;
}
.mat-button-toggle-group.mat-button-toggle-group .mat-button-toggle:nth-child(2) {
  margin-left: auto;
}

結果

有關示例，請參閱此 StackBlitz 。 請注意，需要通過在 CSS 中再次添加相同的類並使其更加具體來覆蓋默認切換組。