角材料设计布局 [英] Angular Material Design layout
问题描述
如何设计带有角形材料布局的布局，例如:
How can I design a layout with angular material layout like:
我从材料设计
说明:带有阴影的md内容框悬停在md工具栏上.
Description: an md-content box with drop shadow hovering over an md-toolbar.
推荐答案
我不认为您可以纯粹在Angular Material中执行此操作，但是您可以在Material中进行大多数操作，然后添加一个简单的CSS类.假设您具有所有必需的脚本和css依赖项，那么您的html将如下所示:
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>
您的CSS将如下所示:
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
此处的键使用layout-align="center start"，它将div在页面上水平居中(使用 flexbox )，然后将其放置在md工具栏下方. layout="row"也是必要的，以确保我们在div的内容上使用flexbox布局.
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.
从此处开始，flex="66"将框的宽度设置为66％，.md-whiteframe-z2添加背景，然后我们的.move-up类使用position: relative; top: -60px将其向上移动60个像素，并使用position: relative; top: -60px将其放置在工具栏上方z-index.
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屋！
