Question

如何设计具有角度材质布局的布局，例如： enter image description here

中抽取了一个例子

描述：一个md-content框，阴影悬停在md-toolbar上。

Answer 1

我认为你不能仅仅在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类使用{{1}将其向上移动60像素并使用position: relative; top: -60px将其放在工具栏上方。

Answer 2

我建议在这里使用repeated-linear-gradient CSS功能，因为我个人更喜欢避免使用Angular Material及其flex实现实现定位。

这个想法是为内容实现两种颜色的背景（全部位于md-toolbar下）：

.background {
    background: repeating-linear-gradient(to bottom, #3f51b5, #3f51b5 64px, #eee 0, #eee);
}

您可以看到工作笔here。

角度材料设计布局

2 个答案: