Question

是否可以根据屏幕大小使用Angular Flex＆Material显示/隐藏<button>标签的某些属性？

类似的事情（不幸的是，不能正常工作）：

 <button [fxFlex.lg]="'mat-raised-button'"
         [fxFlex.md]="'mat-icon-button'"
        (click)="new()">
    ...
</button>

Answer 1

我不知道材料或fxFlex在做什么。但是，如果您没有其他任何帮助，则可以使用纯CSS或CSS

<button [fxFlex]="'mat-raised-button'" id="button1" (click)="new()">...</button>
<button [fxFlex]="'mat-icon-button'" id="button2" (click)="new()">...</button>

和

@media (min-width: 1000px) { //lg 
    #button2 {
      display:none;
    }
}
 @media (max-width: 1000px) { //md 
    #button1{
      display:none;
    }
}

Answer 2

flex-layout库具有一个responsive documentation，您可以在其中找到这些属性：

[fxHide.md]
[fxShow.md]

以此类推。

您可以使用它们根据库定义的断点显示/隐藏元素；或根据需要创建自己的断点。

Here is an example 以及相关代码：

<button [fxHide.xs]="true" [fxHide.md]="true">I'm only displayed on small screen width !</button>

Answer 3

在我的第一个答案之后，这是要告诉您，仅使用fxFlex无法在模板上连续应用指令。

适合您的问题的是fxFlex库具有ngClass扩展名，该扩展名允许您将类应用于元素。

In this example，您可以看到它正在工作。您要做的就是应用正确的类（来自材料库）以使其正常工作。

尽管不是最佳选择，但它可以完成工作。我仍然建议您使用两个按钮中的任一个，这在图书馆使用方面更为简洁。

Angular Flex＆Material：根据屏幕大小隐藏按钮属性

3 个答案: