37

the md-toolbar in angular-material 2 doesn't have a shadow. I want to define for my toolbar

drtapha
  • 539
  • 1
  • 7
  • 15

1 Answers1

81

You can use the mat-elevation-z#classes.

# can stand for a number between 1-24

<mat-toolbar class="mat-elevation-z4">
  With Shadow
</mat-toolbar>

https://material.angular.io/guide/elevation

DevVersion
  • 1,923
  • 14
  • 15
  • I used to do this, but recently I can't get it working. Is it just me, or have they changed things? – Jus10 Mar 21 '17 at 20:11
  • 6
    Thanks for the reminder. The prefix has changed from `md-` to `mat-`. – DevVersion Mar 22 '17 at 21:12
  • 7
    where can i find the documentations this? – Shift 'n Tab Jun 12 '17 at 11:25
  • 1
    Here you can read more about the elevations in Angular material design https://medium.com/@ladyleet/adding-box-shadow-z-depth-to-angular-material-2-components-6bd0de303dcb – bozhidarc Jul 23 '17 at 15:05
  • 1
    Check this out if anyone looks at this answer, https://stackoverflow.com/questions/42415537/angular-material2-toolbar-shadow in the latest version it looks like you have to set position relative and z-index to something above 1 – smoyer Jul 28 '17 at 23:36
  • And if you want to remove elevation you can use mat-elevation-z0 – jbojcic Sep 28 '17 at 08:28
  • 2
    Here is the document : [Using elevation helpers](https://material.angular.io/guide/elevation), or at [github](https://github.com/angular/material2/blob/5.0.1/guides/elevation.md) – btpka3 Dec 18 '17 at 14:06
  • Beyond the elevation, are there more prebuilt CSS classes for things like padding, margin and so on? In Angular Material v1 there were attributes like layout-padding or layout-margin but now in Angular Material v2 I don't find anything like this. – Rubén Jiménez Jan 28 '19 at 00:43