Angular Material 设计排版

Question

如何使用 angular material 布局设计布局，例如：

中举了个例子

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

Answer 1

我不认为你可以纯粹在 Angular Material 中做到这一点，但你可以在 Material 中做到大部分，然后添加一个简单的 css class.假设您拥有所有必需的脚本和 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-toolbar 的正下方。 layout="row" 也是必要的，以确保我们在 div.

的内容上使用 flexbox 布局

从那里，flex="66" 将框的宽度设置为 66%，.md-whiteframe-z2 添加背景，然后我们的 .move-up class 将其向上移动 60使用 position: relative; top: -60px 像素并使用 z-index.

将其放置在工具栏上方

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。

Angular Material 设计排版

Angular Material Design layout

angular-material