Làm thế nào để bạn tạo một trình đơn lồng nhau, thu gọn với Angular Material2?

Question

Tôi đang tìm hỗ trợ trong Angular Material2 cho các menu lồng nhau trong một thanh bên. Mức cao nhất thường sẽ bị đóng theo mặc định và mở một cấp cao nhất sẽ hiển thị các mục menu lồng nhau.

Tôi nghĩ điều này có ý nghĩa như là một điểm khởi đầu, nhưng các mục nav con render (kém) bên ngoài của các mục mẹ:

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> 

Có ai tạo ra loại này của menu sidebar với @ góc/vật liệu?

Answer 1

Thật không may, hiện tại, thư viện thiết kế material design không cung cấp bất kỳ công cụ nào để thực hiện những gì bạn muốn.

Khi nó xuất hiện, bạn có thể sử dụng thành phần tree để đạt được những gì bạn muốn. Nếu không, bạn nên xem xét để xây dựng một mình. Tôi đã làm như vậy bản thân mình (trong một codebase độc ​​quyền, không may) và tôi rất vui khi được giúp đỡ với các câu hỏi cụ thể. Tôi đã sử dụng lồng nhau <md-list> s, <button md-icon-button> và hoạt ảnh tùy chỉnh để làm như vậy.