文档章节

AngularDart Material Design 扩展面板

scooplol
 scooplol
发布于 2018/09/11 10:59
字数 830
阅读 151
收藏 0

MaterialExpansionPanel

Selector: <material-expansionpanel>

材料风格的扩展面板。

一个或多个面板在扩展面板集中组合在一起。 单击面板时,面板内容将展开。 面板由名称,值,可选的辅助文本和展开的面板内容组成。

具有属性 "value" 的内容元素将在其处于折叠状态时用作面板内容的“值”

与面板的交互是通过父扩展集完成的。 该集合考虑了集合中其他面板的状态,并在每个单独的面板上发出适当的操作。

Attributes:

  • wide - 指定展开时面板的宽度,比折叠时的宽度略宽。
  • flat - 表示面板在展开时不应“浮动”或与其他面板分离。

Inputs:

  • alwaysHideExpandIcon bool 
    如果为true,则永远不应显示展开图标。
     
  • alwaysShowExpandIcon bool 
    如果为true,则无论是否使用自定义图标,都应始终显示展开图标。
     
  • cancelDisplayed bool 
    默认情况下,设置小部件是否应显示取消按钮为真的选项。
     
  • cancelText String 
    要在取消按钮上显示的文本。
    例如:“Dismiss”,“Not now”等。默认值为“Cancel”。
     
  • closeOnSave bool 
    如果为true,则在成功保存后,面板将尝试关闭。
     
  • disableHeaderExpansion bool 
    如果为true,则单击标题不会展开或折叠面板。
     
  • disabled bool 
    如果为true,
    则面板将保持折叠状态而无法展开,或者如果默认情况下展开,它将保持展开状态。
     
  • enterAccepts bool 
    如果设置为true,则工具带按钮将侦听Enter keyup事件并对其触发yes操作。
     
  • expandIcon String 
    可选图标名称,用自定义图标替换展开箭头。
     
  • hideExpandedHeader bool 
    如果为true,则在展开面板时隐藏显示面板名称的标题。
     
  • expanded bool 
    如果为true,则默认情况下会展开面板,如果为false,则面板将关闭。
     
  • name String 
    扩展面板的短名称标签。
     
  • saveDisabled bool 
    是否禁用了保存按钮。
     
  • saveText String 
    要在保存按钮上显示的文本。
    例如:“Ok”,“Apply”等。默认值为“Save”。
     
  • secondaryText String 
    一些可选的辅助摘要文本,用于描述面板内托管的窗口小部件的状态。
     
  • showSaveCancel bool 
    默认情况下,设置小部件是否应显示save/cancel按钮为真的选项。

Outputs:

  • cancel Stream<AsyncAction<bool>> 
    面板取消时触发事件。
     
  • close Stream<AsyncAction<bool>> 
    面板试图关闭时触发事件。
    此操作可能会被取消。
     
  • expandedChange Stream<bool> 
    面板折叠或展开时触发的事件。
     
  • expandedChangeByUser Stream<bool> 
    当用户折叠或展开面板时触发事件。
     
  • open Stream<AsyncAction<bool>> 

    面板试图打开时触发事件。

    此操作可能会被取消。
     

  • save Stream<AsyncAction<bool>> 
    保存面板时触发事件。

MaterialExpansionPanelSet

Selector: <material-expansionpanel-set>

一个指令,它将一组MaterialExpansionPanel转换为一个折叠小部件,因此一次只能打开一个MaterialExpansionPanel。

MaterialExpansionPanelAutoDismiss

Selector: <material-expansionpanel[autoDismissable]>

一个自动折叠MaterialExpansionPanel的指令。

展开MaterialExpansionPanel时,其外部的任何单击都将自动折叠面板。

用法示例:

<material-expansionpanel autoDismissable>
</material-expansionpanel>

MaterialExpansionDemo

查看示例,查看源码

© 著作权归作者所有

共有 人打赏支持
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 选项卡

FixedMaterialTabStripComponent Selector: <material-tab-strip> 选项卡条组件,带有选项卡样式按钮和活动选项卡指示器。 这是材质规格中的“固定”选项卡条,它具有相同大小的选项卡按钮,...

scooplol
2018/09/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

带你看数据挖掘与机器学习-厦大EDP上课出勤预测

带你看数据挖掘与机器学习-厦大EDP上课出勤预测 标签: 数据挖掘 特征工程 机器学习 出勤预测 write by xmhexi 2019/3/22 内容提要 首先说明本文是一篇科普文章,通过一个实际案例,帮助理解什...

xmhexi
今天
41
0
IOS  学习记录

1.StackView=>IOS 9及以上支持 2.布局方式: AutoLayout / StackView 堆布局 (线性布局) 3.屏幕适配 (资源分辨率、设计分辨率、屏幕分辨率) Size Class技术 可以针对 屏幕的方向进行设置...

萨x姆
今天
4
0
第四次工业革命:自主经济的崛起

https://36kr.com/p/5170370.html

shengjuntu
昨天
3
0
Cloud Native 与12-Factor

12-Factor(twelve-factor),也称为“十二要素”,是一套流行的应用程序开发原则。Cloud Native架构中使用12-Factor作为设计准则。 12-Factor 的目标在于: 使用标准化流程自动配置,从而使...

waylau
昨天
10
0
java多线程2

“非线程安全”问题存在于“实例变量”中,如果是方法内部的私有变量,则不存在线程安全问题。这是因为方法内部的变量都是私有造成的。 synchronized 获取的都是对象锁。如果多个线程访问多个...

一滴水穿石
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部