html - Angular Material 2 : mat-button css to look like mat-button-toggle

Question

我需要 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...

感谢您的帮助!

Answer 1

您可以直接使用任何内置的 Angular 样式，例如应用切换按钮的填充背景颜色的 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-group 中使用单个 mat-button-toggle 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>