實現嵌套菜單中的角料2

我面臨的一些問題，而在角材質工具欄中實現嵌套的菜單：實現嵌套菜單中的角料2

主菜單列表被放置在該跳跳虎的按鈕，而不是在它之下，如圖the official documentation
沒有什麼，表示該菜單的項目包含一個子菜單列表（某種箭頭例如）
當我實現一個子菜單列表，菜單的主列表中消失一次子菜單被點擊，（你可以參考我下面的代碼在一個小的分辨率進行測試：當點擊「管理」菜單時，它顯示了產品和工作人員名單，但它包含了「管理」項目的菜單的主列表中消失）

這是我的實現：

<md-toolbar color="primary"> 
 
    <button md-button routerLink="/"> 
 
    <md-icon> home </md-icon> 
 
    <span> Home </span> 
 
    </button> 
 

 
    <div fxLayout="row" fxShow="false" fxShow.gt-sm> 
 
    <button md-button [mdMenuTriggerFor]="administration"> 
 
     <span> Manage </span> 
 
    </button> 
 
    <button md-button routerLink="/help"> 
 
     <md-icon> help_outline </md-icon> 
 
     <span> Help </span> 
 
    </button> 
 
    </div> 
 
    
 
    <button md-button [mdMenuTriggerFor]="menu" fxHide="false" fxHide.gt-sm> 
 
    <md-icon> more_vert </md-icon> 
 
    </button> 
 
</md-toolbar> 
 

 
<md-menu #administration="mdMenu"> 
 
    <button md-menu-item routerLink="/products"> 
 
    <span> Products </span> 
 
    </button> 
 
    <button md-menu-item routerLink="/staff"> 
 
    <span> Staff </span> 
 
    </button> 
 
</md-menu> 
 

 
<md-menu xPosition="before" #menu="mdMenu"> 
 
    <button md-menu-item [mdMenuTriggerFor]="administration"> 
 
    <span> Manage </span> 
 
    </button> 
 
    <button md-menu-item routerLink="/help"> 
 
    <span> Help </span> 
 
    </button> 
 
</md-menu>

，我尋找的行爲是AngularJS材料the MenuBar component本地人，因爲角材料仍處於測試版，我想知道如果有一些問題在我的鱈魚我還是隻需要等待下一個版本框架中的這個組件的改進。

來源

2017-06-01 Strider

好吧，我不知道你用什麼，但我用https://teradata.github.io/covalent/#/components/expansion-panel，我想出了以下解決方案：

<md-nav-list td-sidenav-content> 
    <td-expansion-panel md-list-item> 
      <ng-template td-expansion-panel-header> 
       <a md-list-item> 
        <md-icon md-list-avatar>settings</md-icon> 
        <h3 md-line> Nested menu </h3> 
       </a> 
       <md-divider></md-divider> 
      </ng-template> 

     <md-list class="bgc-blue-grey-50"> 
      <h3 md-subheader>Metadata</h3> 
      <a md-list-item style="padding-left:20px;"> 
       <md-icon md-list-avatar>settings</md-icon> 
       <h3 md-line> Nested Item </h3> 
      </a> 
     </md-list> 

    </td-expansion-panel> 

    <!-- Settings --> 
     <a md-list-item> 
      <md-icon md-list-avatar>settings</md-icon> 
      <h3 md-line> Settings </h3> 
     </a> 
</md-nav-list>

來源

2017-06-23 19:47:03 Azarus

實現嵌套菜單中的角料2

回答

相關問題