CODEWITHSUNDEEP
angular-material
softshipper
softshipper

Reputation: 34071

Angular Material Design layout

How can I design a layout with angular material layout like: enter image description here

I took an example from material design

Description: an md-content box with drop shadow hovering over an md-toolbar.

Upvotes: 9

Views: 11927

Answers (2)

Fyodor
Fyodor

Reputation: 285

I would suggest to use repeated-linear-gradient CSS feature here, 'cos I personally prefer to avoid playing with positioning using Angular Material and its flex implementation.

The idea is to implement two-color background for content (all that lays under md-toolbar):

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

You can see working pen here.

Upvotes: 2

Stephen Done
Stephen Done

Reputation: 502

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>

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

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.

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.

Upvotes: 18

Related Questions