9

如何设计具有角度材料布局的布局，例如： 在此处输入图像描述

我从材料设计中举了一个例子

描述：一个 md 内容框，阴影悬停在 md 工具栏上。

4

2 回答 2

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

这里的键是 using layout-align="center start"，它将 div 在页面上水平居中（使用flexbox）并将其放在 md-toolbar 下方。这layout="row"也是确保我们在 div 的内容上使用 flexbox 布局的必要条件。

从那里，flex="66"给盒子一个 66% 的宽度，.md-whiteframe-z2添加背景，然后我们的.move-up类使用 将它向上移动 60 个像素，position: relative; top: -60px并使用 将它放在工具栏上方z-index。

于 2015-03-16T17:53:20.427 回答
2

我建议在这里使用重复线性渐变CSS 功能，因为我个人更喜欢避免使用 Angular Material 及其 flex 实现来玩定位。

这个想法是为内容实现双色背景（所有内容都位于 md-toolbar 下）：

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

你可以在这里看到工作笔。

于 2018-06-22T13:43:15.077 回答