布局参数
I'm above on mobile, and to the left on larger devices.
I'm below on mobile, and to the right on larger devices.
有关布局指令的基本说明,请查看“布局和容器”章节。
要根据设备屏幕大小更改布局,还有其他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
布局外边距,内边距,换行和填充
Parent layout and 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.
layout-margin在每个flex子元素周围添加边距。 它还为布局容器本身添加了一个边距。
layout-padding在每个flex子元素内部添加padding。 它还向布局容器本身添加了填充。
layout-fill强制布局元素填充其父容器。
layout-wrap如果元素占用超过100%,允许flex子元素在容器中换行。
这里是使用layout-wrap的一组flex元素:
[flex=33] [flex=66] [flex=66] [flex=33] [flex=33] [flex=33] [flex=33]
显示和隐藏
使用show hide API来响应显示或隐藏元素。 虽然这些工作类似于ng-show和ng-hide,但这些Angular Material Layout指令是通过媒体查询感知的。
Only show on gt-sm devices.
Shown on small and medium.
Hidden on gt-sm devices.
Shown on small and medium size devices.
Hidden on gt-md devices.
Shown on medium size devices only.
Shown on devices larger than 1200px wide only.
隐藏 (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