Angular Material 教程之布局篇 (五) : 布局参数
发布时间:2020-12-17 09:51:11 所属栏目:安全 来源:网络整理
导读:布局参数 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 有关布局指令的基本说明,请查看“布局和容器”章节。
布局参数
<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> 有关布局指令的基本说明,请查看“布局和容器”章节。
布局外边距,内边距,换行和填充
<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>
这里是使用
<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> 显示和隐藏使用
<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>
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |