AngularDart Material Design 扩展面板

2019独角兽企业重金招聘Python工程师标准>>>

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

查看示例，查看源码。

转载于:https://my.oschina.net/u/3647851/blog/2048716