角度材质布局条件包括

Question

我想了解Angular Material布局。我有一段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行。

问题：如何有条件地使用Angular Material布局指令来执行此操作？

谢谢， -Andres

Answer 1

你去了 - 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>

诀窍是根据屏幕尺寸使用布局和隐藏。

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

Answer 2

  

可用的Plunker here

正如您在angular-material布局额外选项documentation中所看到的，您可以根据屏幕尺寸有条件地显示和隐藏元素。

参考代码，有关详细信息，请参阅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>

希望它有所帮助。