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; }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏刘望舒

React Native入门(三)组件的Props(属性)和State(状态)

前言 在Android或者iOS开发中我们会用到很多控件,这些控件会有很多的属性、样式等等。同样的,React Native中的组件也有属性、样式和状态。 1...

204100
来自专栏阿凯的Excel

快捷键-提速版

今天和大家分享的是快捷键提速版!!(什么是提速版,就是可以迅速提高你的工作速度哇!!貌似所有的Excel技巧都可以提高工作速度) 快捷键提速版正式开始 1、...

27830
来自专栏向治洪

React Native导航器之react-navigation使用

在上一节Navigation组件,我们使用系统提供的导航组件做了一个跳转的例子,不过其实战能力不强,这里推荐一个超牛逼的第三方库:react-navigatio...

2.1K70
来自专栏大数据钻研

css print

最近做表单打印,遂整理了一些打印相关的内容。 说到网页打印,首先想到的便是@media查询(即网页css),通过使用媒体类型print即可解决实际应用的大多数...

32030
来自专栏大数据钻研

HTML 入门笔记 - 初识HTML

基础框架 <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/ht...

46450
来自专栏不止是前端

Vue:父子组件信息传递

39180
来自专栏Google Dart

AngularDart4.0 高级-组件样式 顶

Angular应用程序使用标准CSS进行样式化。 这意味着您可以将所有关于CSS样式表,选择器,规则和媒体查询的知识直接应用于Angular应用程序。

10820
来自专栏飞扬的花生

一步一步学习Bootstrap系列--表单布局

前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把...

339100
来自专栏AndroidTv

前端入门2-HTML标签声明正文-HTML标签

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

20620
来自专栏Nian糕的私人厨房

CSS 鼠标悬停图片,显示隐藏文本

我在 JavaScript 鼠标悬停图片,显示隐藏文本 这篇博文当中实现了同样的效果,只不过是通过 JS 来实现的,但其实,通过 CSS 动画也能实现同样的效果...

15740

扫码关注云+社区

领取腾讯云代金券