flexbox - 根据分辨率更改 Angular 材质按钮样式

Question

如果屏幕很小，我需要从按钮中删除文本。我使用 Flex API 所做的。我还需要将按钮样式从“mat-raised-button”更改为“mat-mini-fab”。如何使这个按钮属性有条件？小屏幕上的 ex 属性“mat-mini-fab”应该应用于其他“mat-raised-button”。更喜欢在这里使用 Flex API，例如用于元素的 fxShow fxHide。

 <button matTooltip="Save" mat-raised-button (click)="saveMember()" color="accent" class="submit-button" aria-label="SAVE" [disabled]="memberForm.invalid">
          <mat-icon>save</mat-icon><span fxHide fxShow.gt-sm>SAVE</span>
 </button>

Answer 1

mat-raised-button并且mat-mini-fab是指令（实际上它们是指令选择器的一部分），并且指令不能是有条件的。您唯一的选择是为每个指令/类型屏幕尺寸设置不同的按钮元素，并使用 flex api 相应地显示或隐藏它们。例如：

<button mat-raised-button fxHide fxShow.gt-sm>
    <mat-icon>save</mat-icon>
    SAVE
</button>
<button mat-mini-fab fxShow fxHide.gt-sm>
    <mat-icon>save</mat-icon>
</button>