AngularDart Material Design 扩展面板 顶

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

查看示例，查看源码。

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