Angular CDK layout API 参考文档
import {LayoutModule} from '@angular/cdk/layout';
BreakpointObserver
检查 @media 查询的匹配状态的工具。
Utility for checking the matching state of @media queries.
方法
| isMatched | |
|---|---|
|
一个或多个媒体查询是否与当前视口的大小匹配。 Whether one or more media queries match the current viewport size. |
|
参数 Parameters |
|
|
value string | readonly string[]
|
要检查的一个或多个媒体查询。 One or more media queries to check. |
返回值 Returns |
|
boolean
|
是否任何一个媒体查询都能匹配上。 Whether any of the media queries match. |
| observe | |
|---|---|
|
获取指定查询的结果的可观察对象，这些查询会在对指定查询的匹配出现任何变化时发出新的结果。 Gets an observable of results for the given queries that will emit new results for any changes in matching of the given queries. |
|
参数 Parameters |
|
|
value string | readonly string[]
|
要检查的一个或多个媒体查询。 One or more media queries to check. |
返回值 Returns |
|
Observable<BreakpointState>
|
指定查询的匹配流。 A stream of matches for the given queries. |
MediaMatcher
调用 matchMedia 查询的实用工具。
A utility for calling matchMedia queries.
方法
| matchMedia | |
|---|---|
|
计算指定的媒体查询，并返回可以从中检索结果的原生 MediaQueryList。确认布局引擎会触发所提供的选择器查询，并为提供的查询返回 MediaQueryList。 Evaluates the given media query and returns the native MediaQueryList from which results can be retrieved. Confirms the layout engine will trigger for the selector query provided and returns the MediaQueryList for the query provided. |
|
参数 Parameters |
|
|
query string
|
|
返回值 Returns |
|
MediaQueryList
|
|
BreakpointState
布局断点的当前状态。
The current state of a layout breakpoint.
属性
| 名称 | 描述 |
|---|---|
|
每次查询要提供给 observe 方法的一个 boolean 型键值对，表示它的当前匹配状态。 A key boolean pair for each query provided to the observe method, with its current matched state. |
|
现在是否匹配此断点。 Whether the breakpoint is currently matching. |
Breakpoints
const Breakpoints: { XSmall: string; Small: string; Medium: string; Large: string; XLarge: string; Handset: string; Tablet: string; Web: string; HandsetPortrait: string; TabletPortrait: string; WebPortrait: string; HandsetLandscape: string; TabletLandscape: string; WebLandscape: string; };