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

查看示例，查看源碼。