angular-material2响应显示/隐藏

Question

是否可以使用角度材料2控制元素的可见性

hide-xx  show-xx hide-gt-xx show-gt-xx

我知道这与angularJS材料有关.
以下代码不起作用:

<md-toolbar color="primary">
  <span>Application Title</span>  
  <span class="example-fill-remaining-space"></span>
  <button md-button hide-xs show-gt-xs>Auto hide button</button>  
</md-toolbar>

我使用https://github.com/angular/material2版本2.0.0-beta1

如果不是,如果没有使用*ngif和屏幕调整大小监听器或其他CSS框架(如Bootstrap),还有其他方法可以做到这一点吗？
也不会https://github.com/angular/flex-layout具有顺便说一下这种可能性？

Answer 1

正如你已经提到的,我会推荐@ angular/flex-layout!

这是一个额外的包 - 需要安装,它不是角度的一部分!

可能的选择:

• fxHide
• fxHide.xs
• fxHide.gt-XS
• fxHide.sm
• fxHide.gt-SM
• fxHide.md
• fxHide.gt-MD
• fxHide.lg
• fxHide.gt-LG
• fxHide.xl

用法:

<div fxFlex="60" fxHide.xs></div>

live-demo:https://plnkr.co/edit/yrhaGtFpHOlYYOTqzDDO?p=preview

文档在这里:

https://github.com/angular/flex-layout/wiki/API-Documentation

https://github.com/angular/flex-layout/wiki/fxShow-API

https://github.com/angular/flex-layout/wiki/fxHide-API