底部操作表 Bottom Sheet

bottom-sheet 的 API

Angular Material bottom-sheet API 参考文档

import {MatBottomSheetModule} from '@angular/material/bottom-sheet';

用于触发 Material Design 底部操作表的服务。

Service to trigger Material Design bottom sheets.

方法
dismiss

关掉当前可见的底部操作表。

Dismisses the currently-visible bottom sheet.

参数

Parameters

result?

R

要传递给底部操作表实例的数据。

Data to pass to the bottom sheet instance.

open

打开一个包含指定组件的底部操作表。

Opens a bottom sheet containing the given component.

参数

Parameters

component

ComponentType<T>

要装入底部操作表的组件类型。

Type of the component to load into the bottom sheet.

config?

MatBottomSheetConfig<D>

额外的配置选项。

Extra configuration options.

返回值

Returns

MatBottomSheetRef<T, R>

指向新打开的底部操作表的引用。

Reference to the newly-opened bottom sheet.

open

打开一个包含指定模板的底部操作表。

Opens a bottom sheet containing the given template.

参数

Parameters

template

TemplateRef<T>

要用作底部操作表内容的 TemplateRef。

TemplateRef to instantiate as the bottom sheet content.

config?

MatBottomSheetConfig<D>

额外的配置选项。

Extra configuration options.

返回值

Returns

MatBottomSheetRef<T, R>

指向新打开的底部操作表的引用。

Reference to the newly-opened bottom sheet.

打开底部操作表时使用的配置。

Configuration used when opening a bottom sheet.

属性
名称 描述

ariaLabel: string | null

指定给底部操作表元素的 Aria 标签。

Aria label to assign to the bottom sheet element.

autoFocus: boolean

在打开底部操作表时是否应该让第一个可获得焦点的元素获取焦点。

Whether the bottom sheet should focus the first focusable element on open.

backdropClass: string

背景板的自定义类。

Custom class for the backdrop.

closeOnNavigation: boolean

当用户在历史记录中前进或后退时,底部操作表是否应该关闭。请注意,这通常不包括单击某些链接(除非用户正在使用 HashLocationStrategy )。

Whether the bottom sheet should close when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy).

data: D | null

注入到子组件中的数据。

Data being injected into the child component.

direction: Direction

底部操作表的文本布局方向。

Text layout direction for the bottom sheet.

disableClose: boolean

用户是否可以使用 escape 或单击外部来关闭底部操作表。

Whether the user can use escape or clicking outside to close the bottom sheet.

hasBackdrop: boolean

底部操作表是否有背景板。

Whether the bottom sheet has a backdrop.

panelClass: string | string[]

要添加到底部操作表容器中的额外 CSS 类。

Extra CSS classes to be added to the bottom sheet container.

restoreFocus: boolean

关闭底部操作表时是否应该把焦点还给以前拥有焦点的元素。

Whether the bottom sheet should restore focus to the previously-focused element, after it's closed.

scrollStrategy: ScrollStrategy

用于底部操作表的滚动策略。

Scroll strategy to be used for the bottom sheet.

viewContainerRef: ViewContainerRef

用于放置底部操作表浮层的容器。

The view container to place the overlay for the bottom sheet into.

引用来自底部操作表服务的底部操作表。

Reference to a bottom sheet dispatched from the bottom sheet service.

属性
名称 描述

disableClose: boolean | undefined

是否允许用户关闭底部操作表。

Whether the user is allowed to close the bottom sheet.

instance: T

该组件的实例组成了底部操作表的内容。

Instance of the component making up the content of the bottom sheet.

方法
afterDismissed

获取一个可观察对象,当底部操作表已经完成并关闭时,它会收到通知。

Gets an observable that is notified when the bottom sheet is finished closing.

返回值

Returns

Observable<R | undefined>
afterOpened

获取一个可观察对象,当底部操作表已经打开并出现时,它会收到通知。

Gets an observable that is notified when the bottom sheet has opened and appeared.

返回值

Returns

Observable<void>
backdropClick

获取一个可观察对象,当点击浮层的背景板时,它会发出数据。

Gets an observable that emits when the overlay's backdrop has been clicked.

返回值

Returns

Observable<MouseEvent>
dismiss

关闭底部操作表。

Dismisses the bottom sheet.

参数

Parameters

result?

R

要传递回底部操作表的数据。

Data to be passed back to the bottom sheet opener.

keydownEvents

获取一个可观察对象,当指定浮层收到 keydown 事件时,它会发出数据。

Gets an observable that emits when keydown events are targeted on the overlay.

返回值

Returns

Observable<KeyboardEvent>

这个注入令牌可以用来指定底部操作表的默认选项。

Injection token that can be used to specify default bottom sheet options.

const MAT_BOTTOM_SHEET_DEFAULT_OPTIONS: InjectionToken<MatBottomSheetConfig<any>>;

这个注入令牌可以用来访问那些传入底部操作表的数据。

Injection token that can be used to access the data that was passed in to a bottom sheet.

const MAT_BOTTOM_SHEET_DATA: InjectionToken<any>;

Material 底部操作表使用的动画。

Animations used by the Material bottom sheet.

const matBottomSheetAnimations: { readonly bottomSheetState: AnimationTriggerMetadata; };

Angular Material bottom-sheet-testing API 参考文档

import {MatBottomSheetHarness} from '@angular/material/bottom-sheet/testing';

在测试中与标准 MatBottomSheet 进行交互的测试工具。

Harness for interacting with a standard MatBottomSheet in tests.

方法
异步
dismiss

按下 escape 即可关闭底部操作表。注意,如果通过配置把 “disableClose” 设置成了 true,就不能使用这个方法。

Dismisses the bottom sheet by pressing escape. Note that this method cannot be used if "disableClose" has been set to true via the config.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步
getAllChildLoaders

参数

Parameters

selector

S

返回值

Returns

Promise<HarnessLoader[]>
异步
getAllHarnesses

参数

Parameters

query

HarnessQuery<T>

返回值

Returns

Promise<T[]>
异步
getAriaLabel

获取底部操作表 “aria-label” 属性的值。

Gets the value of the bottom sheet's "aria-label" attribute.

返回值

Returns

Promise<string | null>
异步
getChildLoader

参数

Parameters

selector

S

返回值

Returns

Promise<HarnessLoader>
异步
getHarness

参数

Parameters

query

HarnessQuery<T>

返回值

Returns

Promise<T>
异步
host

获取一个代表该组件宿主元素的 TestElementPromise

Gets a Promise for the TestElement representing the host element of the component.

返回值

Returns

Promise<TestElement>