使用elevation助手

使用elevation助手

使用elevation助手

Using elevation helpers

Angular Material的elevation类与mixins允许你沿z轴在元素中增加间隔。所有的material design元素都有静止高度。一些元素可能会随用户操作改变其高度。在Material Design手册中有说明高度的使用方法。

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 explains how to best use elevation.

Angular Material提供了两种方法来控制元素的高度:预定义的CSS类与mixins。

Angular Material provides two ways to control the elevation of elements: predefined CSS classes and mixins.

预定义CSS类

Predefined CSS classes

在元素中增加高度的最简单的方法是增加预定义的CSS类mat-elevation-z#,其中#是你想设置的高度,0-24。动态高度可通过切换高度类实现:

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:

<div [class.mat-elevation-z2]="!isActive" [class.mat-elevation-z8]="isActive"></div>

Mixins

也可通过mat-elevationmixin在CSS中添加高度,接收0-24来表示元素的高度。需要先引入~@angular/material/theming后,方可使用mixin:

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:

@import '~@angular/material/theming';

.my-class {
  @include mat-elevation(2);
}

还有更方便的做法,可以使用 mat-elevation-transitionmixin,在高度改变的时候添加一个转换。

For convenience, you can use the mat-elevation-transition mixin to add a transition when the elevation changes:

@import '~@angular/material/theming';

.my-class {
  @include mat-elevation-transition;
  @include mat-elevation(2);

  &:active {
    @include mat-elevation(8);
  }
}

发表评论