-
Notifications
You must be signed in to change notification settings - Fork 6.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(elevation): add guide for elevation helpers (#8172)
* docs(elevation): add guide for elevation helpers - Credit to @M-a-c for intitial version * Remove extra newlines * Address comments
- Loading branch information
1 parent
c5eaa7c
commit 3b50d3d
Showing
5 changed files
with
82 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
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 to best 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 | ||
achieved 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 of the element. In order to use the mixin, you must import | ||
`~@angular/material/theming`: | ||
|
||
```scss | ||
@import '~@angular/material/theming'; | ||
|
||
.my-class { | ||
@include mat-elevation(2); | ||
} | ||
``` | ||
|
||
For convenience, you can use the `mat-elevation-transition` mixin to add a transition when the | ||
elevation changes: | ||
|
||
```scss | ||
@import '~@angular/material/theming'; | ||
|
||
.my-class { | ||
@include mat-elevation-transition; | ||
@include mat-elevation(2); | ||
|
||
&:active { | ||
@include mat-elevation(8); | ||
} | ||
} | ||
``` |
4 changes: 4 additions & 0 deletions
4
src/material-examples/elevation-overview/elevation-overview-example.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
.example-container { | ||
padding: 16px; | ||
margin-bottom: 16px; | ||
} |
7 changes: 7 additions & 0 deletions
7
src/material-examples/elevation-overview/elevation-overview-example.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
<div class="example-container" | ||
[class.mat-elevation-z2]="!isActive" | ||
[class.mat-elevation-z8]="isActive"> | ||
Example | ||
</div> | ||
|
||
<button mat-button (click)="isActive = !isActive">Toggle Elevation</button> |
13 changes: 13 additions & 0 deletions
13
src/material-examples/elevation-overview/elevation-overview-example.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import {Component} from '@angular/core'; | ||
|
||
/** | ||
* @title Elevation CSS classes | ||
*/ | ||
@Component({ | ||
selector: 'elevation-overview-example', | ||
styleUrls: ['elevation-overview-example.css'], | ||
templateUrl: 'elevation-overview-example.html', | ||
}) | ||
export class ElevationOverviewExample { | ||
isActive = false; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters