角度材質レイアウト条件付き

Question

角度材質のレイアウトを理解しようとしています。私はHTMLのセクションを常に右に浮かべて、それは列にいくつかの行が含まれています。そのセクションは、より小さいデバイスを使用する場合には期待どおりにレンダリングされます。しかし、デバイスが手持ちの小さい場合、右浮動セクションの調整に加えて、私はその列にいくつかの行を含めたくありません。

left-panel middle-panel right-panel-line 1 
          right-panel-line 2 
          right-panel-line 3 

、次いで小画面装置上のレイアウトは次のようになります：

例えば、大画面デバイス上でレイアウトがあろう

left-panel 
middle-panel 
right-panel-line 1 

第2、第3ラインで右浮動パネルは表示されません。

質問：これを行うにはどのように角材レイアウトディレクティブを条件付きで使用しますか？

おかげで、 -Andresはここ

Answer 1

利用可能Plunker here

、あなたは条件付きで表示され、画面サイズに応じて、要素を非表示にすることができます。参照用

コードは、完全な詳細についてはplunkerを参照してください。

<div layout="row" layout-xs="column"> 
    <div flex>left-panel</div> 
    <div flex>middle-panel</div> 
    <div layout="column" flex> 
     <div flex>right-panel-line 1</div> 
     <div flex hide-xs>right-panel-line 2</div> 
     <div flex hide-xs>right-panel-line 3</div> 
    </div> 
    </div> 

はそれがお役に立てば幸いです。

Answer 2

あなたが行く - CodePen

マークアップ

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout-gt-xs="row" layout-xs="column"> 
    <div style="background:red" flex></div> 
    <div style="background:green" flex></div> 
    <div flex layout="column"> 
    <div style="background:purple" flex></div> 
    <div style="background:yellow" flex hide-xs></div> 
    <div style="background:cyan" flex hide-xs></div> 
    </div> 
</div> 

トリックは、画面サイズに応じたレイアウトと非表示を使用することです。あなたはangular-materialレイアウト追加オプションdocumentationで見ることができるように

https://material.angularjs.org/latest/layout/container https://material.angularjs.org/latest/layout/options