Menu
How can I design a layout with angular material layout like:
I took an example from material design
Description: an md-content box with drop shadow hovering over an md-toolbar.
669
Angular material and material design basically the same. Material design is abstract for mobile and web. Angular material is implemented for Angular. So if you use "Angular material" you are using "Material design".
A design system contains something called a component library. This is a series of ready to use components that can be used in your application. A good example here is how material design is a design system with Angular material, Vuetify and Material UI as it's component library.
Luckily, Angular comes with a handy solution for these scenarios: the BreakpointObserver. Which is a utility for checking the matching state of @media queries. In this post, we will build a sample application to add the ability to configure certain breakpoints, and being able to listen to them.
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.
140
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.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
