Pannello di espansione materiale Google

Question

Desidero creare un pannello di espansione come quello in the demo. Non vedo dove sia l'api per questo. Come viene invocato?

Answer 1

Ce n'è uno incorporato nel sidenav sul sito di materiale angolare: https://material.angularjs.org/. Non è offerto come componente separato, ma la fonte è lì.

Inoltre, questa era una funzionalità pianificata in un determinato momento, ma è stata contrassegnata come recentemente deprecata: https://github.com/angular/material/issues/985.

Answer 2

È possibile creare un pannello di espansione utilizzando i componenti di AngularDart di Google. Una demo e i documenti sono collegati dal loro github.

Ecco un excerpt from the API docs:

Un'espansione del pannello di materiale in stile.

Uno o più pannelli sono raggruppati in un gruppo di pannelli di espansione. Quando si fa clic su un pannello>, i contenuti del pannello si espandono. Un pannello è costituito da un nome, un valore, testo secondario opzionale e il contenuto del pannello espanso.

elemento contenuto con valore di attributo verrà utilizzato come "valore" contenuto del pannello quando è in uno stato compresso

interazioni con pannello vengono effettuati attraverso l'espansione set genitore. Il set tiene conto dello stato degli altri pannelli nel set, e invia le azioni appropriate su ogni singolo pannello.

TODO (Google): input da tastiera/accessibilità utilizzo

Esempio:

<material-expansionpanel (save)="doSave()"> 
    <my-component></my-component> 
</material-expansionpanel> 

<material-expansionpanel wide> 
    <div value class="valueClass"> 
    Fancily formatted value of my panel's contents 
    </div> 
    <my-component></my-component> 
</material-expansionpanel>