MaterialPopupComponent
Selector: <material-popup>
具有材料设计外观的弹出组件。
注意事项:
- 弹出窗口关闭和打开会自动延迟以添加动画
- 利用PopupInterface中定义的enforceSpaceConstraints。
如果内容大小太多添加滚动到页面,这将非常有用。
- 即使此组件支持ChangeDetectionStrategy。对于在示例中测试的案例的OnPush,它没有设置ChangeDetectionStrategy。这意味着可以在OnPush模式下在另一个组件中使用此组件,但由于任何此类实现都需要所有内容子项支持OnPush,因此由实现者自行决定。
- 如果内容发生变化并需要重新调整位置,请使用在PopupInterface中也定义的trackLayoutChanges。
材质弹出窗口还支持延迟/延迟加载的内容。
该组件将自己发布为DropdownHandle,因此其子级可以通过注入来控制其可见性:
class MyComponent {
final DropdownHandle _dropdownHandle;
MyComponent(this._dropdownHandle);
void onSomethingThatShouldCloseTheDropdown() {
_dropdownHandle.close();
}
}
Inputs:
- autoDismiss bool
设置弹出窗口是否应在文档按下时关闭(关闭)自身。
- constrainToViewport bool
设置是否应将弹出窗口限制为视口。
如果这是true,那么弹出窗口的位置将被限制为始终位于视口内而不是移出屏幕外。
-
enforceSpaceConstraints bool
设置弹出窗口是否应根据相对于视口的可用空间自动重新定位自身。
-
hasBox bool
弹出式面板是否具有包装内容的封闭框。
这为面板提供了阴影和背景颜色。当它关闭时,不会应用延迟动画。
-
ink bool
将弹出窗口的背景颜色设置为墨迹($ mat-gray-700)。
-
matchMinSourceWidth bool
设置弹出窗口是否应将最小宽度设置为源宽度。
-
offsetX int
将x偏移设置为弹出窗口最终定位的位置。
-
offsetY int
将y偏移设置为弹出窗口最终定位的位置。
-
popupSizeProvider PopupSizeProvider
为弹出窗口大小设置提供程序。
覆盖注入的PopupSizeProvider。
-
preferredPositions Iterable<dynamic>
设置在设置enforceSpaceConstraints时应尝试的位置。
与Angular提供程序类似,它支持首选位置的嵌套列表。 弹出窗口将展平位置列表并选择第一个适合屏幕的位置。
-
slide String
弹出缩放的方向。
有效值为x,y或null。
-
source PopupSource
设置应相对于弹出窗口创建的源。
-
trackLayoutChanges bool
设置是否应跟踪源以进行更改。
-
visible bool
设置是否应显示弹出窗口。
如果可见不是当前状态,则可以关闭或打开弹出窗口。
-
z int
边界效果的z-elevation。
Outputs:
- autoDismissed Stream<Event>
弹出窗口自动关闭时触发事件的流。
输出事件应该是FocusEvent或MouseEvent。
- close Stream<void>
关闭弹出窗口时触发异步事件。
- open Stream<void>
在打开弹出窗口时触发异步事件。
- opened Stream<void>
弹出窗口打开后触发事件的流。
- visibleChange Stream<bool>
弹出窗口的visible属性发生更改时触发的同步事件(例如,从false变为true或true变为false)。
与onOpen和onClose不同,这在事件完成后发生。