Ste*_*one 18
我不认为你可以纯粹在Angular Material中做到这一点,但你可以在Material中进行,然后添加一个简单的css类.假设您拥有所有必需的脚本和css依赖项,您的html将如下所示:
<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看起来像:
.move-up {
position: relative;
top: -60px;
z-index: 99;
}
这是一个有效的插件:
http://plnkr.co/edit/6lHVbV?p=preview
这里的键是使用layout-align="center start",它将div水平居中在页面上(使用flexbox)并将它放在md工具栏下面.这layout="row"也是必要的,以确保我们在div的内容上使用flexbox布局.
从那里开始,flex="66"给框宽度为66%,.md-whiteframe-z2添加背景,然后我们的.move-up类将它向上移动60像素position: relative; top: -60px并使用它将其放置在工具栏上方z-index.
| 归档时间： |
|
| 查看次数： |
11504 次 |
| 最近记录： |