2017-01-31 25 views
2

を隠すことは、私は、これがangularJS-材料で取り組んでいる知っている
角度-material2応答ショー/

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

を使用して、角度-material2を持つ要素の可視性を制御することが可能です。以下
コードは動作しません:

<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のフレームワーク?
また、https://github.com/angular/flex-layoutにもこの可能性はありますか?

+0

あなたは何を意味する*は\ * ngifと画面がブートストラップ*のようなリスナー、または他のCSSフレームワークのサイズを変更せずに使用していることを行うための別の方法ですか? –

+0

私は、CSSでいくつかの "競合/オーバーライド"について聞いたので、素材と一緒にブートストラップを使いたくないです。そして、ngifについて - コントローラ側(typescriptファイル)を使わずにhtmlテンプレートでロジックを使いたい –

答えて

9

すでに言及したように、@ 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> 

ライブデモ:ここ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

+0

その働き。 –

+0

これについてのドキュメントはどこですか?彼らがすでに持っているすべてのクラスや機能のためにgoogleをするのは嫌いです – LOTUSMS

+0

私は現在wikiしかないと思う:https://github.com/angular/flex-layout/wiki – mxii

関連する問題