Angular Material sidenav API 参考文档
import {MatSidenavModule} from '@angular/material/sidenav';
指令
MatDrawerContent
extends
CdkScrollable
方法
elementScrolled | |
---|---|
返回在宿主元素上发生 scroll 事件时会触发的可观察对象。 Returns observable that emits when a scroll event is fired on the host element. |
|
返回值 Returns |
|
Observable<Event>
|
|
getElementRef | |
---|---|
获取视口的 ElementRef。 Gets the ElementRef for the viewport. |
|
返回值 Returns |
|
ElementRef<HTMLElement>
|
|
measureScrollOffset | |
---|---|
测量相对于视口指定边缘的滚动偏移量。这个方法可以用来代替对 scrollLeft 或 scrollTop 的直接检查,因为各浏览器对于 scrollLeft 在 RTL 中的理解并不一致。 该方法返回的值是标准化的,左右都总是指向滚动容器的左侧和右侧,与布局方向无关。 start 和 end 在 LTR 上下文中指向左右,在 RTL 上下文则相反。 Measures the scroll offset relative to the specified edge of the viewport. This method can be used instead of directly checking scrollLeft or scrollTop, since browsers are not consistent about what scrollLeft means in RTL. The values returned by this method are normalized such that left and right always refer to the left and right side of the scrolling container irrespective of the layout direction. start and end refer to left and right in an LTR context and vice-versa in an RTL context. |
|
参数 Parameters |
|
from "top" | "bottom" | "start" | "end" | "left" | "right"
|
要测量的边缘。 The edge to measure from. |
返回值 Returns |
|
number
|
|
scrollTo | |
---|---|
滚动到指定的偏移量。这是浏览器原生 scrollTo 方法的标准化版本,因为各个浏览器对于 scrollLeft 在 RTL 中的理解并不一致。 对于此方法,无论布局方向如何,左右都总是指向滚动容器的左侧和右侧。start 和 end 在 LTR 上下文中分别指向左右,在 RTL 上下文中则相反。 Scrolls to the specified offsets. This is a normalized version of the browser's native scrollTo method, since browsers are not consistent about what scrollLeft means in RTL. For this method left and right always refer to the left and right side of the scrolling container irrespective of the layout direction. start and end refer to left and right in an LTR context and vice-versa in an RTL context. |
|
参数 Parameters |
|
options ExtendedScrollToOptions
|
指定要滚动到的偏移量。 specified the offsets to scroll to. |
MatDrawer
该组件对应于一个可以在抽屉容器上打开的抽屉。
This component corresponds to a drawer that can be opened on the drawer container.
属性
名称 | 描述 |
---|---|
@Input()
|
抽屉是否应该在打开时自动聚焦于第一个可聚焦元素。 Whether the drawer should focus the first focusable element automatically when opened.
Defaults to false in when |
@Input()
|
抽屉是否可以通过 escape 或点击背景板来关闭。 Whether the drawer can be closed with the escape key or by clicking on the backdrop. |
@Input()
|
抽屉的模式:'over'、'push' 或 'side'之一。 Mode of the drawer; one of 'over', 'push' or 'side'. |
@Input()
|
抽屉是否打开了。我们把它重载了,因为我们要在它开始或结束时触发一个事件。 Whether the drawer is opened. We overload this because we trigger an event when it starts or end. |
@Input()
|
抽屉附加到的一侧。 The side that the drawer is attached to. |
@Output()
|
抽屉开始关闭时发出的事件。 Event emitted when the drawer has started closing. |
@Output('positionChanged')
|
当抽屉的位置发生变化时会触发。 Event emitted when the drawer's position changes. |
@Output()
|
抽屉打开状态发生变化时发出的事件。 Event emitted when the drawer open state is changed. |
@Output()
|
抽屉开始打开时发出的事件。 Event emitted when the drawer has started opening. |
方法
异步
close
|
|
---|---|
关闭抽屉。 Close the drawer. |
|
返回值 Returns |
|
Promise<MatDrawerToggleResult>
|
|
异步
open
|
|
---|---|
打开抽屉。 Open the drawer. |
|
参数 Parameters |
|
openedVia? FocusOrigin
|
是通过按键、鼠标点击还是编程的方式打开抽屉。侧边导航关闭后,用于焦点管理。 Whether the drawer was opened by a key press, mouse click or programmatically. Used for focus management after the sidenav is closed. |
返回值 Returns |
|
Promise<MatDrawerToggleResult>
|
|
异步
toggle
|
|
---|---|
切换这个抽屉。 Toggle this drawer. |
|
参数 Parameters |
|
isOpen boolean = !this.opened
|
抽屉是否应该打开。 Whether the drawer should be open. |
openedVia? FocusOrigin
|
通过按键、鼠标点击还是编程的方式打开抽屉。侧边导航关闭后,用于焦点管理。 Whether the drawer was opened by a key press, mouse click or programmatically. Used for focus management after the sidenav is closed. |
返回值 Returns |
|
Promise<MatDrawerToggleResult>
|
|
MatDrawerContainer
<mat-drawer-container>
组件。
<mat-drawer-container>
component.
这是一两个 <mat-drawer>
的父组件,用于在内部验证状态,并协调背景板和内容的样式。
This is the parent component to one or two <mat-drawer>
s that validates the state internally
and coordinates the backdrop and content styling.
属性
名称 | 描述 |
---|---|
@Input()
|
是否要在任何抽屉大小发生变化时自动调整容器大小。 Whether to automatically resize the container whenever the size of any of its drawers changes. 使用时风险自负! 通过在每个变更检测周期中测量抽屉,启用此选项会导致布局抖动。可以通过 Use at your own risk! Enabling this option can cause layout thrashing by measuring
the drawers on every change detection cycle. Can be configured globally via the
|
@Input()
|
当其中一个侧边导航打开时,抽屉容器是否应该有背景板。如果明确设置为 Whether the drawer container should have a backdrop while one of the sidenavs is open.
If explicitly set to |
@Output()
|
单击抽屉背景板时发出的事件。 Event emitted when the drawer backdrop is clicked. |
|
The drawer child with the |
|
对包装了可滚动内容的 CdkScrollable 实例的引用。 Reference to the CdkScrollable instance that wraps the scrollable content. |
|
The drawer child with the |
方法
close | |
---|---|
对开始和结束处的抽屉调用 Calls |
open | |
---|---|
对开始和结束处的抽屉调用 Calls |
updateContentMargins | |
---|---|
重新计算并更新该内容的内联样式。请注意,这应该谨慎使用,因为它会导致重排(reflow)。 Recalculates and updates the inline styles for the content. Note that this should be used sparingly, because it causes a reflow. |
MatSidenavContent
extends
MatDrawerContent
方法
elementScrolled | |
---|---|
返回在宿主元素上发生 scroll 事件时会触发的可观察对象。 Returns observable that emits when a scroll event is fired on the host element. |
|
返回值 Returns |
|
Observable<Event>
|
|
getElementRef | |
---|---|
获取视口的 ElementRef。 Gets the ElementRef for the viewport. |
|
返回值 Returns |
|
ElementRef<HTMLElement>
|
|
measureScrollOffset | |
---|---|
测量相对于视口指定边缘的滚动偏移量。这个方法可以用来代替对 scrollLeft 或 scrollTop 的直接检查,因为各浏览器对于 scrollLeft 在 RTL 中的理解并不一致。 该方法返回的值是标准化的,左右都总是指向滚动容器的左侧和右侧,与布局方向无关。 start 和 end 在 LTR 上下文中指向左右,在 RTL 上下文则相反。 Measures the scroll offset relative to the specified edge of the viewport. This method can be used instead of directly checking scrollLeft or scrollTop, since browsers are not consistent about what scrollLeft means in RTL. The values returned by this method are normalized such that left and right always refer to the left and right side of the scrolling container irrespective of the layout direction. start and end refer to left and right in an LTR context and vice-versa in an RTL context. |
|
参数 Parameters |
|
from "top" | "bottom" | "start" | "end" | "left" | "right"
|
要测量的边缘。 The edge to measure from. |
返回值 Returns |
|
number
|
|
scrollTo | |
---|---|
滚动到指定的偏移量。这是浏览器原生 scrollTo 方法的标准化版本,因为各个浏览器对于 scrollLeft 在 RTL 中的理解并不一致。 对于此方法,无论布局方向如何,左右都总是指向滚动容器的左侧和右侧。start 和 end 在 LTR 上下文中分别指向左右,在 RTL 上下文中则相反。 Scrolls to the specified offsets. This is a normalized version of the browser's native scrollTo method, since browsers are not consistent about what scrollLeft means in RTL. For this method left and right always refer to the left and right side of the scrolling container irrespective of the layout direction. start and end refer to left and right in an LTR context and vice-versa in an RTL context. |
|
参数 Parameters |
|
options ExtendedScrollToOptions
|
指定要滚动到的偏移量。 specified the offsets to scroll to. |
MatSidenav
extends
MatDrawer
属性
名称 | 描述 |
---|---|
@Input()
|
抽屉是否应该在打开时自动聚焦于第一个可聚焦元素。 Whether the drawer should focus the first focusable element automatically when opened.
Defaults to false in when |
@Input()
|
抽屉是否可以通过 escape 或点击背景板来关闭。 Whether the drawer can be closed with the escape key or by clicking on the backdrop. |
@Input()
|
当侧边导航处于固定模式时,侧边导航底部与视口底部之间的间隙。 The gap between the bottom of the sidenav and the bottom of the viewport when the sidenav is in fixed mode. |
@Input()
|
侧边导航是否在视口中是固定的。 Whether the sidenav is fixed in the viewport. |
@Input()
|
当侧边导航处于固定模式时,侧边导航顶部与视口顶部之间的间隙。 The gap between the top of the sidenav and the top of the viewport when the sidenav is in fixed mode. |
@Input()
|
抽屉的模式:'over'、'push' 或 'side'之一。 Mode of the drawer; one of 'over', 'push' or 'side'. |
@Input()
|
抽屉是否打开了。我们把它重载了,因为我们要在它开始或结束时触发一个事件。 Whether the drawer is opened. We overload this because we trigger an event when it starts or end. |
@Input()
|
抽屉附加到的一侧。 The side that the drawer is attached to. |
@Output()
|
抽屉开始关闭时发出的事件。 Event emitted when the drawer has started closing. |
@Output('positionChanged')
|
当抽屉的位置发生变化时会触发。 Event emitted when the drawer's position changes. |
@Output()
|
抽屉打开状态发生变化时发出的事件。 Event emitted when the drawer open state is changed. |
@Output()
|
抽屉开始打开时发出的事件。 Event emitted when the drawer has started opening. |
方法
异步
close
|
|
---|---|
关闭抽屉。 Close the drawer. |
|
返回值 Returns |
|
Promise<MatDrawerToggleResult>
|
|
异步
open
|
|
---|---|
打开抽屉。 Open the drawer. |
|
参数 Parameters |
|
openedVia? FocusOrigin
|
是通过按键、鼠标点击还是编程的方式打开抽屉。侧边导航关闭后,用于焦点管理。 Whether the drawer was opened by a key press, mouse click or programmatically. Used for focus management after the sidenav is closed. |
返回值 Returns |
|
Promise<MatDrawerToggleResult>
|
|
异步
toggle
|
|
---|---|
切换这个抽屉。 Toggle this drawer. |
|
参数 Parameters |
|
isOpen boolean = !this.opened
|
抽屉是否应该打开。 Whether the drawer should be open. |
openedVia? FocusOrigin
|
通过按键、鼠标点击还是编程的方式打开抽屉。侧边导航关闭后,用于焦点管理。 Whether the drawer was opened by a key press, mouse click or programmatically. Used for focus management after the sidenav is closed. |
返回值 Returns |
|
Promise<MatDrawerToggleResult>
|
|
MatSidenavContainer
extends
MatDrawerContainer
属性
名称 | 描述 |
---|---|
@Input()
|
是否要在任何抽屉大小发生变化时自动调整容器大小。 Whether to automatically resize the container whenever the size of any of its drawers changes. 使用时风险自负! 通过在每个变更检测周期中测量抽屉,启用此选项会导致布局抖动。可以通过 Use at your own risk! Enabling this option can cause layout thrashing by measuring
the drawers on every change detection cycle. Can be configured globally via the
|
@Input()
|
当其中一个侧边导航打开时,抽屉容器是否应该有背景板。如果明确设置为 Whether the drawer container should have a backdrop while one of the sidenavs is open.
If explicitly set to |
@Output()
|
单击抽屉背景板时发出的事件。 Event emitted when the drawer backdrop is clicked. |
|
The drawer child with the |
|
对包装了可滚动内容的 CdkScrollable 实例的引用。 Reference to the CdkScrollable instance that wraps the scrollable content. |
|
The drawer child with the |
方法
close | |
---|---|
对开始和结束处的抽屉调用 Calls |
open | |
---|---|
对开始和结束处的抽屉调用 Calls |
updateContentMargins | |
---|---|
重新计算并更新该内容的内联样式。请注意,这应该谨慎使用,因为它会导致重排(reflow)。 Recalculates and updates the inline styles for the content. Note that this should be used sparingly, because it causes a reflow. |
类型别名
MatDrawerToggleResult
开关 Promise 的结果,用于标出抽屉的状态。
Result of the toggle promise that indicates the state of the drawer.
type MatDrawerToggleResult = 'open' | 'close';
MatDrawerMode
抽屉和侧边导航显示模式。
Drawer and SideNav display modes.
type MatDrawerMode = 'over' | 'push' | 'side';
常量
MAT_DRAWER_DEFAULT_AUTOSIZE
配置默认情况下抽屉是否应该自动调整大小。
Configures whether drawers should use auto sizing by default.
const MAT_DRAWER_DEFAULT_AUTOSIZE: InjectionToken<boolean>;
Angular Material sidenav-testing API 参考文档
import {MatDrawerHarness} from '@angular/material/sidenav/testing';
类
MatDrawerHarness
在测试中用来与标准 mat-drawer 进行交互的测试工具。
Harness for interacting with a standard mat-drawer in tests.
方法
异步
getAllChildLoaders
|
|
---|---|
参数 Parameters |
|
selector S
|
|
返回值 Returns |
|
Promise<HarnessLoader[]>
|
|
异步
getAllHarnesses
|
|
---|---|
参数 Parameters |
|
query HarnessQuery<T>
|
|
返回值 Returns |
|
Promise<T[]>
|
|
异步
getChildLoader
|
|
---|---|
参数 Parameters |
|
selector S
|
|
返回值 Returns |
|
Promise<HarnessLoader>
|
|
异步
getHarness
|
|
---|---|
参数 Parameters |
|
query HarnessQuery<T>
|
|
返回值 Returns |
|
Promise<T>
|
|
getMode | |
---|---|
返回值 Returns |
|
Promise<'over' | 'push' | 'side'>
|
|
getPosition | |
---|---|
返回值 Returns |
|
Promise<'start' | 'end'>
|
|
异步
host
|
|
---|---|
获取一个代表该组件宿主元素的 Gets a |
|
返回值 Returns |
|
Promise<TestElement>
|
|
isOpen | |
---|---|
返回值 Returns |
|
Promise<boolean>
|
|
MatDrawerContainerHarness
extends
ContentContainerComponentHarness
在测试中用来与标准 mat-drawer-container 进行交互的测试工具。
Harness for interacting with a standard mat-drawer-container in tests.
方法
异步
getAllChildLoaders
|
|
---|---|
参数 Parameters |
|
selector S
|
|
返回值 Returns |
|
Promise<HarnessLoader[]>
|
|
异步
getAllHarnesses
|
|
---|---|
参数 Parameters |
|
query HarnessQuery<T>
|
|
返回值 Returns |
|
Promise<T[]>
|
|
异步
getChildLoader
|
|
---|---|
参数 Parameters |
|
selector S
|
|
返回值 Returns |
|
Promise<HarnessLoader>
|
|
异步
getContent
|
|
---|---|
Gets the element that has the container's content. |
|
返回值 Returns |
|
Promise<MatDrawerContentHarness>
|
|
异步
getDrawers
|
|
---|---|
Gets drawers that match particular criteria within the container. |
|
参数 Parameters |
|
filter DrawerHarnessFilters = {}
|
可选择过滤哪些纸片。 Optionally filters which chips are included. |
返回值 Returns |
|
Promise<MatDrawerHarness[]>
|
|
异步
getHarness
|
|
---|---|
参数 Parameters |
|
query HarnessQuery<T>
|
|
返回值 Returns |
|
Promise<T>
|
|
异步
host
|
|
---|---|
获取一个代表该组件宿主元素的 Gets a |
|
返回值 Returns |
|
Promise<TestElement>
|
|
MatDrawerContentHarness
extends
ContentContainerComponentHarness
在测试中用来与标准 mat-drawer-content 进行交互的测试工具。
Harness for interacting with a standard mat-drawer-content in tests.
方法
异步
getAllChildLoaders
|
|
---|---|
参数 Parameters |
|
selector S
|
|
返回值 Returns |
|
Promise<HarnessLoader[]>
|
|
异步
getAllHarnesses
|
|
---|---|
参数 Parameters |
|
query HarnessQuery<T>
|
|
返回值 Returns |
|
Promise<T[]>
|
|
异步
getChildLoader
|
|
---|---|
参数 Parameters |
|
selector S
|
|
返回值 Returns |
|
Promise<HarnessLoader>
|
|
异步
getHarness
|
|
---|---|
参数 Parameters |
|
query HarnessQuery<T>
|
|
返回值 Returns |
|
Promise<T>
|
|
异步
host
|
|
---|---|
获取一个代表该组件宿主元素的 Gets a |
|
返回值 Returns |
|
Promise<TestElement>
|
|
MatSidenavContainerHarness
extends
ContentContainerComponentHarness
在测试中用来与标准 mat-sidenav-container 进行交互的测试工具。
Harness for interacting with a standard mat-sidenav-container in tests.
方法
异步
getAllChildLoaders
|
|
---|---|
参数 Parameters |
|
selector S
|
|
返回值 Returns |
|
Promise<HarnessLoader[]>
|
|
异步
getAllHarnesses
|
|
---|---|
参数 Parameters |
|
query HarnessQuery<T>
|
|
返回值 Returns |
|
Promise<T[]>
|
|
异步
getChildLoader
|
|
---|---|
参数 Parameters |
|
selector S
|
|
返回值 Returns |
|
Promise<HarnessLoader>
|
|
异步
getContent
|
|
---|---|
Gets the element that has the container's content. |
|
返回值 Returns |
|
Promise<MatSidenavContentHarness>
|
|
异步
getHarness
|
|
---|---|
参数 Parameters |
|
query HarnessQuery<T>
|
|
返回值 Returns |
|
Promise<T>
|
|
异步
getSidenavs
|
|
---|---|
Gets sidenavs that match particular criteria within the container. |
|
参数 Parameters |
|
filter DrawerHarnessFilters = {}
|
可选择过滤哪些纸片。 Optionally filters which chips are included. |
返回值 Returns |
|
Promise<MatSidenavHarness[]>
|
|
异步
host
|
|
---|---|
获取一个代表该组件宿主元素的 Gets a |
|
返回值 Returns |
|
Promise<TestElement>
|
|
MatSidenavContentHarness
extends
ContentContainerComponentHarness
在测试中用来与标准 mat-sidenav-content 进行交互的测试工具。
Harness for interacting with a standard mat-sidenav-content in tests.
方法
异步
getAllChildLoaders
|
|
---|---|
参数 Parameters |
|
selector S
|
|
返回值 Returns |
|
Promise<HarnessLoader[]>
|
|
异步
getAllHarnesses
|
|
---|---|
参数 Parameters |
|
query HarnessQuery<T>
|
|
返回值 Returns |
|
Promise<T[]>
|
|
异步
getChildLoader
|
|
---|---|
参数 Parameters |
|
selector S
|
|
返回值 Returns |
|
Promise<HarnessLoader>
|
|
异步
getHarness
|
|
---|---|
参数 Parameters |
|
query HarnessQuery<T>
|
|
返回值 Returns |
|
Promise<T>
|
|
异步
host
|
|
---|---|
获取一个代表该组件宿主元素的 Gets a |
|
返回值 Returns |
|
Promise<TestElement>
|
|
MatSidenavHarness
在测试中用来与标准 mat-sidenav 进行交互的测试工具。
Harness for interacting with a standard mat-sidenav in tests.
方法
异步
getAllChildLoaders
|
|
---|---|
参数 Parameters |
|
selector S
|
|
返回值 Returns |
|
Promise<HarnessLoader[]>
|
|
异步
getAllHarnesses
|
|
---|---|
参数 Parameters |
|
query HarnessQuery<T>
|
|
返回值 Returns |
|
Promise<T[]>
|
|
异步
getChildLoader
|
|
---|---|
参数 Parameters |
|
selector S
|
|
返回值 Returns |
|
Promise<HarnessLoader>
|
|
异步
getHarness
|
|
---|---|
参数 Parameters |
|
query HarnessQuery<T>
|
|
返回值 Returns |
|
Promise<T>
|
|
getMode | |
---|---|
返回值 Returns |
|
Promise<'over' | 'push' | 'side'>
|
|
getPosition | |
---|---|
返回值 Returns |
|
Promise<'start' | 'end'>
|
|
异步
host
|
|
---|---|
获取一个代表该组件宿主元素的 Gets a |
|
返回值 Returns |
|
Promise<TestElement>
|
|
异步
isFixedInViewport
|
|
---|---|
侧边导航是否在视口中是固定的。 Whether the sidenav is fixed in the viewport. |
|
返回值 Returns |
|
Promise<boolean>
|
|
isOpen | |
---|---|
返回值 Returns |
|
Promise<boolean>
|
|
接口
DrawerHarnessFilters
A set of criteria that can be used to filter a list of MatDrawerHarness
instances.
属性
名称 | 描述 |
---|---|
|
Only find instances whose side is the given value. |
DrawerContainerHarnessFilters
A set of criteria that can be used to filter a list of MatDrawerContainerHarness
instances.
DrawerContentHarnessFilters
A set of criteria that can be used to filter a list of MatDrawerContentHarness
instances.