[英]cant get default selected value with index (angular material mat-button-toggle)
[英]Angular Material 2 : mat-button css to look like mat-button-toggle
我需要CSS协助才能取得Button
<button mat-icon-button>
<mat-icon>format_align_left</mat-icon>
</button>
在设计上等效于按钮切换
<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-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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.