【问题标题】:angular-material2 responsive show/hideangular-material2 响应式显示/隐藏
【发布时间】:2017-01-31 11:04:56
【问题描述】:

是否可以使用 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也有这种可能吗?

【问题讨论】:

  • 什么意思是另一种不使用 *ngif 和屏幕调整大小侦听器或其他 css 框架(如 Bootstrap)的另一种方法
  • 我不想将 Bootstrap 与 Material 一起使用,因为我听说 css 中有一些“冲突/覆盖”。关于 ngif - 我想在 html 模板中使用逻辑而不使用控制器端(打字稿文件)

标签: angular angular-material2


【解决方案1】:

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

这是一个附加包 - 安装 需要,它不是 angular 的一部分!

可能的选择:

  • 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>

现场演示: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

【讨论】:

猜你喜欢
  • 2017-03-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-03-02
  • 1970-01-01
  • 2015-06-05
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多