Wie erstellen Sie ein verschachteltes, kollabierendes Menü mit Angular Material2?

Question

Ich suche nach Unterstützung innerhalb von Angular Material2 für verschachtelte Menüs innerhalb einer Sidebar. Die oberste Ebene wäre normalerweise standardmäßig geschlossen, und das Öffnen einer obersten Ebene würde verschachtelte Menüelemente offen legen.

Ich dachte, das Gefühl als Ausgangspunkt gemacht, aber das Kind nav Elemente machen (schlecht) außerhalb der Eltern Artikel:

plnkr

<md-sidenav-container class="my-container"> 
    <md-sidenav #sidenav class="my-sidenav"> 
    <md-list> 
     <md-list-item> 
      <h3 md-line> First Parent </h3> 
      <md-nav-list> 
      <a md-list-item href="#">First Child</a> 
      <a md-list-item href="#">Second Child</a> 
      <a md-list-item href="#">Third Child</a> 
      </md-nav-list> 
     </md-list-item> 
     <md-list-item> 
      <h3 md-line> Second Parent </h3> 
      <md-nav-list> 
      <a md-list-item href="#">First Child</a> 
      <a md-list-item href="#">Second Child</a> 
      </md-nav-list> 
     </md-list-item> 
    </md-list> 
    </md-sidenav> 
    <div class="my-container"> 
    <button md-button (click)="sidenav.open()">Open</button> 
    </div> 
</md-sidenav-container> 

Hat jemand diese Art von Sidebar-Menü erstellt mit @ eckig/Material?

Answer 1

Leider bietet die Materialdesign-Bibliothek ab sofort kein Werkzeug, um das zu tun, was Sie wollen.

Sobald es herauskommt, können Sie möglicherweise die tree Komponente verwenden, um zu erreichen, was Sie wollen. Andernfalls sollten Sie selbst einen bauen. Ich habe es selbst gemacht (in einer proprietären Codebase, leider) und ich würde gerne mit spezifischen Fragen helfen. Ich habe verschachtelte <md-list> s, <button md-icon-button> s und benutzerdefinierte Animationen dazu verwendet.