AngularDart Material Design 弹出框 顶

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不同，这在事件完成后发生。

MaterialPopupExample

查看示例，查看源码。

(adsbygoogle = window.adsbygoogle || []).push({}); function googleAdJSAtOnload() { var element = document.createElement("script"); element.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"; element.async = true; document.body.appendChild(element); } if (window.addEventListener) { window.addEventListener("load", googleAdJSAtOnload, false); } else if (window.attachEvent) { window.attachEvent("onload", googleAdJSAtOnload); } else { window.onload = googleAdJSAtOnload; }