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

上一篇: 使用Angular轻松搭建CMS页面下一篇:阿里云前端周刊 - 第 19 期

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

发布时间：2019-06-25 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了Angular Material 教程之布局篇 (五) : 布局参数，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

布局参数


      
      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="
  
    I'm above on mobile, and to the left on larger devices.
  
  
    I'm below on mobile, and to the right on larger devices.
  
" tITle="" data-original-title="复制">
      
      
<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



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


      
      
      this element have margins.


  Parent layout and this element have padding.


  Parent layout is set to fill available space.


  I am using all three at once.
" title="" data-original-title="复制">

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

隐藏 (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

脚本宝典总结

以上是脚本宝典为你收集整理的Angular Material 教程之布局篇 (五) : 布局参数全部内容，希望文章能够帮你解决Angular Material 教程之布局篇 (五) : 布局参数所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：Angular Angular API API div flex flex post-format-gallery this