布局参数
<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 |
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。