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