Angular Material 教程之佈局篇 (五) : 佈局參數

佈局參數

<div layout="row" layout-sm="column">
  <div flex>
    I'm above on mobile, and to the left on larger devices.
  </div>
  <div flex>
    I'm below on mobile, and to the right on larger devices.
  </div>
</div>

有關佈局指令的基本說明，請查看「佈局和容器」章節。
要根據設備屏幕大小更改佈局，還有其餘layout指令可用：

layout API	flex API	激活設備時
layout	flex	設置默認佈局方向，除非被另外一個斷點覆蓋。
layout-xs	flex-xs	width < 600px
layout-gt-xs	flex-gt-xs	width >= 600px
layout-sm	flex-sm	600px <= width < 960px
layout-gt-sm	flex-gt-sm	width >= 960px
layout-md	flex-md	960px <= width < 1280px
layout-gt-md	flex-gt-md	width >= 1280px
layout-lg	flex-lg	1280px <= width < 1920px
layout-gt-lg	flex-gt-lg	width >= 1920/b>px
layout-xl	flex-xl	width >= 1920px

佈局外邊距，內邊距，換行和填充

<div layout="row" layout-margin>
  <div flex>Parent layout and this element have margins.</div>
</div>
<div layout="row" layout-padding>
  <div flex>Parent layout and this element have padding.</div>
</div>
<div layout="row" layout-fill style="min-height: 224px;">
  <div flex>Parent layout is set to fill available space.</div>
</div>
<div layout="row" layout-padding layout-margin layout-fill style="min-height: 224px;">
  <div flex>I am using all three at once.</div>
</div>

• layout-margin在每一個flex子元素周圍添加邊距。 它還爲佈局容器自己添加了一個邊距。

• layout-padding在每一個flex子元素內部添加padding。 它還向佈局容器自己添加了填充。

• layout-fill強制佈局元素填充其父容器。

• layout-wrap若是元素佔用超過100％，容許flex子元素在容器中換行。

這裏是使用layout-wrap的一組flex元素:

<div layout="row" layout-wrap>
  <div flex="33">[flex=33]</div>
  <div flex="66">[flex=66]</div>
  <div flex="66">[flex=66]</div>
  <div flex="33">[flex=33]</div>
  <div flex="33">[flex=33]</div>
  <div flex="33">[flex=33]</div>
  <div flex="33">[flex=33]</div>
</div>

顯示和隱藏

使用show hide API來響應顯示或隱藏元素。 雖然這些工做相似於ng-show和ng-hide，但這些Angular Material Layout指令是經過媒體查詢感知的。

<div layout="row">
  <div hide show-gt-sm flex>
    Only show on gt-sm devices.
  </div>
  <div hide-gt-sm flex>
    Shown on small and medium.<br>
    Hidden on gt-sm devices.
  </div>
  <div show hide-gt-md flex>
    Shown on small and medium size devices.<br>
    Hidden on gt-md devices.
  </div>
  <div hide show-md flex>
    Shown on medium size devices only.
  </div>
  <div hide show-gt-lg flex>
    Shown on devices larger than 1200px wide only.
  </div>
</div>

隱藏 (display: none)	顯示 (不然隱藏)	激活條件:
hide-xs	show-xs	width < 600px
hide-gt-xs	show-gt-xs	width >= 600px
hide-sm	show-sm	600px <= width < 960px
hide-gt-sm	show-gt-sm	width >= 960px
hide-md	show-md	960px <= width < 1280px
hide-gt-md	show-gt-md	width >= 1280px
hide-lg	show-lg	1280px <= width < 1920px
hide-gt-lg	show-gt-lg	width >= 1920px
hide-xl	show-xl	width >= 1920px