angular-material2 响应式 show/hide

Question

是否可以使用

控制 angular-material2 元素的可见性

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

我知道这与 angularJS-material.
一起工作下面的代码不起作用：

<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，正如你已经提到的！

这是一个附加包 - 安装需要，它不是 angular!

的一部分

可能的选项：

fx隐藏
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

angular-material2 响应式 show/hide

angular-material2 responsive show/hide

angular

angular-material2