角度材料设计布局 [英] Angular Material Design layout
问题描述
我如何设计具有角材料布局的布局，例如:
描述:一个 md 内容框，带有悬停在 md 工具栏上的阴影.
我不认为你可以纯粹在 Angular Material 中做到这一点，但你可以在 Material 中做到这一点，然后添加一个简单的 css 类.假设您拥有所有必需的脚本和 css 依赖项，您的 html 将如下所示:
<md-toolbar flex="33"></md-工具栏><div layout-align="center start" layout="row"><md-content class="md-whiteframe-z2 move-up" flex="66"><p layout-margin>Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英.Integer quis varius nibh，eget fringilla massa.Phasellus sollicitudin，tellus vel hendrerit commodo，eros purus placerat mi，一种 tristique orci lacus egestas lectus.Aenean congue rutrum suscipit.Aliquam 时代 volutpat.sed sollicitudin dui sat amet sapien luctus tincidunt.在欧盟 ipsum lectus.Duis bibendum auctor lorem hendrerit tempor.Aenean rhoncus, dui in mattis interdum, ex ultricies libero, ut tincidunt lectus exfinibus lacus.Integer iaculis、nunc tempus finibus cursus、elit eros dictum dolor、et dapibus lectus sapien at risus.Quisque ac metus in turpis malesuada rutrum sed quis quam.Mauris pulvinar dignissim nunc a laoreet.Nam a arcu at sem imperdiet iaculis.</p></md-content>您的 CSS 将如下所示:
.move-up {位置:相对；顶部:-60px；z-索引:99；}这是一个有效的 plunk:
http://plnkr.co/edit/6lHVbV?p=preview
这里的键是使用 layout-align="center start"，它使 div 在页面上水平居中(使用 flexbox) 并将其放在 md-toolbar 的正下方.layout="row" 也是必要的，以确保我们在 div 的内容上使用 flexbox 布局.
从那里，flex="66" 给框一个 66% 的宽度，.md-whiteframe-z2 添加背景，然后我们的 .move-up 类只是使用 position: relative 将其向上移动 60 个像素；顶部:-60px 并使用 z-index 将其放置在工具栏上方.
How can I design a layout with angular material layout like:
I took an example from material design
Description: an md-content box with drop shadow hovering over an md-toolbar.
I don't think that you can do this purely in Angular Material, but you can do it mostly in Material and then add on a simple css class. Assuming you have all the required script and css dependencies, your html will look like this:
<body ng-app="materialDesignApp" ng-controller="MainCtrl" layout="column">
<md-toolbar flex="33">
</md-toolbar>
<div layout-align="center start" layout="row">
<md-content class="md-whiteframe-z2 move-up" flex="66">
<p layout-margin>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis varius nibh, eget fringilla massa. Phasellus sollicitudin, tellus vel hendrerit commodo, eros purus placerat mi, a tristique orci lacus egestas lectus. Aenean congue rutrum suscipit. Aliquam erat volutpat. Sed sollicitudin dui sit amet sapien luctus tincidunt. In eu ipsum lectus. Duis bibendum auctor lorem hendrerit tempor. Aenean rhoncus, dui in mattis interdum, ex erat ultricies libero, ut tincidunt lectus ex finibus lacus. Integer iaculis, nunc tempus finibus cursus, elit eros dictum dolor, et dapibus lectus sapien at risus. Quisque ac metus in turpis malesuada rutrum sed quis quam. Mauris pulvinar dignissim nunc a laoreet. Nam a arcu at sem imperdiet iaculis.
</p>
</md-content>
</div>
</body>
And your CSS will look like:
.move-up {
position: relative;
top: -60px;
z-index: 99;
}
Here's a working plunk:
http://plnkr.co/edit/6lHVbV?p=preview
The keys here are using layout-align="center start", which centers the div horizontally on the page (using flexbox) and places it just under the md-toolbar. The layout="row" is necessary as well to make sure we use a flexbox layout on the content of the div.
From there, flex="66" gives the box a width of 66%, .md-whiteframe-z2 adds the backdrop, and then our .move-up class just moves it up by 60 pixels using position: relative; top: -60px and places it above the toolbar using z-index.
这篇关于角度材料设计布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
