文档章节

AngularDart Material Design 弹出框

scooplol
 scooplol
发布于 2018/09/11 18:15
字数 837
阅读 14
收藏 0

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

查看示例,查看源码

© 著作权归作者所有

共有 人打赏支持
scooplol
粉丝 15
博文 103
码字总数 205785
作品 0
南充
程序员
私信 提问
AngularDart 现已全面采用 Dart 开发

一直以来,Angular 2依然采用TypeScript作为主流开发语言,然后自动编译成JavaScript 和 Dart。Dart开发者一直在进行Angular 2拆分,将其分为TypeScript/JavaScript版本和Dart版本,并成立了...

oschina
2016/07/21
6K
25
AngularDart 3.0:轻松升级,性能更好

AngularDart 3.0 现已推出。它带来更好的性能和更少的代码生成,加速开发效率。 3.0 版本尽管有一些突破性的变化,但由于 public API 的调整极少,可以看成是一个平滑的升级。主要改进在于代...

王练
2017/05/06
2.6K
4
AngularDart Material Design 卡片

自述 Material Card 材料卡是由Google材料团队(也称为mdc-web)提供的卡片样式。 这是一个允许在AngularDart应用程序中使用样式的包装器。 有关如何使用这些样式的文档,请参阅mdc文档。 可...

scooplol
2018/09/09
0
0
谷歌的 “Dart ”编程语言重返舞台

谷歌 Dart 曾经踌踌满志地想要取代 JavaScript 成为 Web 开发的首选语言。然而在一年半前,谷歌放弃了这个想法。因为 Dart 不仅仅在语言本身,包括它的整个生态圈,都比 JavaScript 落后了一...

局长
2016/11/13
5.5K
10
AngularDart Material Design 菜单

MaterialMenuComponent Selector: <material-menu> 材质菜单基于MenuModel对象呈现菜单。 此菜单包含material-popup中的material-list和material-button,其文本或图标可由调用者指定。 单击...

scooplol
2018/09/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mybatis缓存的装饰器模式

一般在开发生产中,对于新需求的实现,我们一般会有两种方式来处理,一种是直接修改已有组件的代码,另一种是使用继承方式。第一种显然会破坏已有组件的稳定性。第二种,会导致大量子类的出现...

算法之名
昨天
12
0
单元测试

右键方法 Go To --> Test,简便快速生成测试方法。 相关注解 @RunWith(SpringRunner.class) 表示要在测试环境中跑,底层实现是 jUnit测试工具。 @SpringBootTest 表示启动整个 Spring工程 @A...

imbiao
昨天
3
0
欧拉公式

欧拉公式表达式 欧拉公式的几何意 cosθ + j sinθ 是个复数,实数部分也就是实部为 cosθ ,虚数部分也就是虚部为 j sinθ ,对应复平面单位圆上的一个点。 根据欧拉公式和这个点可以用 复指...

sharelocked
昨天
5
0
burpsuite无法抓取https数据包

1.将浏览器和burpsuite的代理都设置好 2.在浏览器地址栏输入: http://burp 3.下载下面的证书,并将证书导入浏览器 cacert.der

Frost729
昨天
3
0
JeeSite4.x 消息管理、消息推送、消息提醒

实现统一的消息推送接口,包含PC消息、短信消息、邮件消息、微信消息等,无需让所有开发者了解消息是怎么发送出去的,只需了解消息发送接口即可。 所有推送消息均通过 MsgPushUtils 工具类发...

ThinkGem
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部