Angular Material 2：mat-button css 看起来像 mat-button-toggle答案

【问题标题】：Angular Material 2 : mat-button css to look like mat-button-toggleAngular Material 2：mat-button css 看起来像 mat-button-toggle
【发布时间】：2018-10-01 03:32:07
【问题描述】：

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

感谢您的帮助！

【问题讨论】：

标签： html css angular sass angular-material2

【解决方案1】：

您可以直接使用任何内置的角度样式，例如 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>

【讨论】：

谢谢！我自己找不到样式...更像是：
好的 - 但<button mat-button style="min-width: unset;"><mat-icon>favorite</mat-icon></button> 看起来不像一个切换按钮 - 这是你所要求的。如果您想要一个纯图标按钮，请使用<button mat-button mat-icon-button><mat-icon>favorite</mat-icon></button>
stackblitz.com/edit/toggle-stack 没有“mat-raised-button”，它看起来更像是一个切换按钮（对我来说）。
那是因为你把它放在一个按钮切换组中——你没有在你的问题中显示出来。如果您尝试在组外使用它，除非您使用凸起按钮，否则它看起来不像切换按钮。
同意对不起，我看到的所有例子都在一个组中。