布局 Layout

layout 概览

这个 layout 包提供了一些工具来构建响应式用户界面,以响应屏幕尺寸的变化。

The layout package provides utilities to build responsive UIs that react to screen-size changes.

BreakpointObserver 是一个用于对媒体查询进行求值,并对其查询结果的变化作出反应的实用工具。

BreakpointObserver is a utility for evaluating media queries and reacting to changes in the results of those queries.

isMatched 方法用于根据当前视口大小来对一个或多个媒体查询进行求值。

The isMatched method is used to evaluate one or more media queries against the current viewport size.

const isSmallScreen = breakpointObserver.isMatched('(max-width: 599px)');

observe 方法用于得到一个可观察对象的流,只要其中指定的任何一个媒体查询中有不同的结果,它就会发出事件。

The observe method is used to get an observable stream that will emit whenever one of the given media queries would have a different result.

const layoutChanges = breakpointObserver.observe([
  '(orientation: portrait)',
  '(orientation: landscape)',
]);

layoutChanges.subscribe(result => {
  updateMyLayoutForOrientationChange();
});

一组默认的媒体查询对应着不同设备类型的断点。

A set of default media queries are available corresponding to breakpoints for different device types.

import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';

@Component({...})
class MyComponent {
  constructor(breakpointObserver: BreakpointObserver) {
    breakpointObserver.observe([
      Breakpoints.HandsetLandscape,
      Breakpoints.HandsetPortrait
    ]).subscribe(result => {
      if (result.matches) {
        this.activateHandsetLayout();
      }
    });
  }
}

内置的断点基于 Google 的 Material Design 规范。可用的值有:

The built-in breakpoints based on Google's Material Design specification. The available values are:

  • Handset - 手持设备

    Handset

  • Tablet - 平板电脑

    Tablet

  • Web - 网站

    Web

  • HandsetPortrait - 手持设备竖屏

    HandsetPortrait

  • TabletPortrait - 平板电脑竖屏

    TabletPortrait

  • WebPortrait - Web 竖屏

    WebPortrait

  • HandsetLandscape - 手持设备横屏

    HandsetLandscape

  • TabletLandscape - 平板电脑横屏

    TabletLandscape

  • WebLandscape - Web 横屏

    WebLandscape

MediaMatcher 是一个较底层的实用工具,它是对原生 matchMedia 的包装。该服务规范了浏览器的差异,可以作为一个便利 API 实用,可以在单元测试时用假对象来代替它。matchMedia 方法可以用来获取原生的 MediaQueryList

MediaMatcher is a lower-level utility that wraps the native matchMedia. This service normalizes browser differences and serves as a convenient API that can be replaced with a fake in unit tests. The matchMedia method can be used to get a native MediaQueryList.

@Component({...})
class MyComponent {
  constructor(mediaMatcher: MediaMatcher) {
    const mediaQueryList = mediaMatcher.matchMedia('(min-width: 1px)');
  }
}