Docs (Guides): Mat elevation guide #3917
Conversation
googlebot
added
the
cla: yes
guides/mat-elevation.md
Outdated
|
|
||
| ## Mixins | ||
| In order to use the mixin for Elevation you must | ||
| `@import '~@angular/material/core/style/_elevation.scss';` |
There was a problem hiding this comment.
I think this should be ~@angular/material/theming now that they're using a flat release structure (#3776)
There was a problem hiding this comment.
Ok yeah I'll have to fix this then
There was a problem hiding this comment.
@willshowell Do you know if i will need to specify elevation.scss from that path?
@import '~@angular/material/theming/style/_elevation.scss';?
There was a problem hiding this comment.
@M-a-c no that should error. Using the master builds, check out your node_modules. At /node_modules/@angular/material/_theming.scss you can see that all the mixins/functions/definitions are concatenated together, including mat-elevation().
And due to Sass importing of partials, you don't need the leading underscore or file extension in your import statement.
guides/mat-elevation.md
Outdated
| How to use the mixin | ||
| ```scss | ||
| .myClass { | ||
| @include $mat-elevation(2); |
There was a problem hiding this comment.
shouldn't this be without the $? -> @include mat-elevation(2);
guides/mat-elevation.md
Outdated
| @include $mat-elevation(2); | ||
|
|
||
| &:active { | ||
| @include $mat-elevation(8); |
| } | ||
|
|
||
| .dynamimc { | ||
| @include $mat-elevation(2); |
There was a problem hiding this comment.
Also without $ ? At least in my Project it won't compile with a $
|
@Sabartius thanks for the feedback |
| .dynamimc { | ||
| @include mat-elevation(2); | ||
|
|
||
| &:active { |
There was a problem hiding this comment.
Shouldn't this be &:hover?
| @@ -0,0 +1,5 @@ | |||
| <div class="dynamimc">Hover over me!</div> | |||
| } | ||
|
|
||
|
|
||
| .dynamimc { |
guides/mat-elevation.md
Outdated
| ``` | ||
|
|
||
| ## Deprecated | ||
| The use of `mdElevation($zValue)` is deprecated. |
There was a problem hiding this comment.
Should we use the words attribute / directive in this text to be more clear?
| @@ -0,0 +1,5 @@ | |||
| <div class="dynamimc">Hover over me!</div> | |||
|
|
|||
| <div class"no-elevation">No Elevation</div> | |||
There was a problem hiding this comment.
Does adding the no-elevation class here create confusion?
There was a problem hiding this comment.
Yeah good point, I removed it in the next commit
|
@ladyleet any additional comments/suggestions for this PR? |
| &:hover { | ||
| @include mat-elevation(8); | ||
| } | ||
| } |
| @@ -0,0 +1,33 @@ | |||
| # mat-elevation | |||
There was a problem hiding this comment.
how do you feel about this?
# Elevation
Angular Material's elevation classes and mixins allow you to add separation between elements along the z-axis.
All material design elements have resting elevations. In addition, some elements may change their elevation in response to user interaction. The [Material Design spec](https://material.io/guidelines/material-design/elevation-shadows.html) explains how best to use elevation.
Angular Material provides two ways to control the elevation of elements: predefined CSS classes and mixins.
## Predefined CSS classes
The easiest way to add elevation to an element is to simply add one of the predefined CSS classes `mat-elevation-z#` where `#` is the elevation number you want, 0-24. Dynamic elevation can be acheived by switching elevation classes:
```html
<div [class.mat-elevation-z2]="!isActive" [class.mat-elevation-z8]="isActive"></div>
```
<!-- example(elevation-overview) -->
## Mixins
Elevations can also be added in CSS via the `mat-elevation` mixin, which takes a number 0-24 indicating the elevation level of the element. In order to use the mixin you must import `~@angular/material/theming`.
```scss
@import ~@angular/material/theming;
.myClass {
@include mat-elevation(2);
&:active {
@include mat-elevation(8);
}
}
```
|
Closing due to inactivity |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Added a basic guide on how to use Mat Elevation.
Includes Example
Fixes #2800