html - Angular Material 2:垫按钮css看起来像垫按钮切换

我需要CSS协助才能取得Button

<button mat-icon-button>
    <mat-icon>format_align_left</mat-icon>
</button>

与Button toggle等效（在设计中）

<mat-button-toggle-group>
  <mat-button-toggle>
    <mat-icon>format_align_left</mat-icon>
  </mat-button-toggle>
</mat-button-toggle-group>

因为在真实的工具栏中（例如，请参见按钮切换），某些命令（例如：缩进）不会被切换而是仅被单击。

但是我找不到要应用到按钮上的确切CSS ...

谢谢您的帮助 ！

最佳答案

您可以直接使用任何内置的角度样式，例如mat-button-toggle-checked，它会应用切换按钮的填充背景色。

未“打开”或按下的切换按钮基本上是一个没有最小宽度的凸起按钮。因此，要使常规按钮看起来像切换按钮：

<button mat-button mat-raised-button style="min-width: unset;">
    <mat-icon>format_align_left</mat-icon>
</button>

“打开”或按下的切换按钮基本上是凸起的按钮，没有最小宽度，该最小宽度用切换按钮的“打开”颜色填充。因此，要使常规按钮看起来像处于“打开”状态的切换按钮：

<button mat-button mat-raised-button style="min-width: unset;"
    class="mat-button-toggle-checked">
    <mat-icon>format_align_left</mat-icon>
</button>

您可以使用ngClass和一些简单的逻辑将两个按钮组合在一起以产生自己的“独立”切换按钮：

<button mat-button mat-raised-button style="min-width: unset;"
    [ngClass]="{'mat-button-toggle-checked' : on}"
    (click)="on = !on;">
    <mat-icon>format_align_left</mat-icon>
</button>

但是当然您不需要这样做，因为您可以在带有mat-button-toggle选项的mat-button-toggle-group中使用单个multiple来具有独立的切换按钮：

<mat-button-toggle-group multiple>
    <mat-button-toggle value="left">
        <mat-icon>format_align_left</mat-icon>
    </mat-button-toggle>
</mat-button-toggle-group>

关于html - Angular Material 2:垫按钮css看起来像垫按钮切换，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49941239/