Angular Material 教程之布局篇 (五) : 布局参数

布局参数

《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 APIflex API激活设备时
layoutflex设置默认布局方向,除非被另一个断点覆盖。
layout-xsflex-xswidth < 600px
layout-gt-xsflex-gt-xswidth >= 600px
layout-smflex-sm600px <= width < 960px
layout-gt-smflex-gt-smwidth >= 960px
layout-mdflex-md960px <= width < 1280px
layout-gt-mdflex-gt-mdwidth >= 1280px
layout-lgflex-lg1280px <= width < 1920px
layout-gt-lgflex-gt-lgwidth >= 1920/b>px
layout-xlflex-xlwidth >= 1920px

布局外边距,内边距,换行和填充

《Angular Material 教程之布局篇 (五) : 布局参数》

<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元素:

《Angular Material 教程之布局篇 (五) : 布局参数》

<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-showng-hide,但这些Angular Material Layout指令是通过媒体查询感知的。

《Angular Material 教程之布局篇 (五) : 布局参数》

<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-xsshow-xswidth < 600px
hide-gt-xsshow-gt-xswidth >= 600px
hide-smshow-sm600px <= width < 960px
hide-gt-smshow-gt-smwidth >= 960px
hide-mdshow-md960px <= width < 1280px
hide-gt-mdshow-gt-mdwidth >= 1280px
hide-lgshow-lg1280px <= width < 1920px
hide-gt-lgshow-gt-lgwidth >= 1920px
hide-xlshow-xlwidth >= 1920px
    原文作者:DemoPark
    原文地址: https://segmentfault.com/a/1190000007217834
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞