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

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

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

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

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

<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>选项来设置独立的切换按钮：

=SPLIT(REGEXREPLACE(A14,"(.*),(.*)at (.*)","$1$2$3")," ")

角度材质2：mat-button css看起来像mat-button-toggle

1 个答案: