实现嵌套菜单中的角料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

回答

相关问题