小编kri*_*ram的帖子

如何使用 angular mat-nav 材料创建嵌套菜单?(更新)

我正在尝试为我的 angular 应用程序创建一个嵌套的 mat-menu 项目。我得到了一些解决方案,仅当嵌套选项显示为弹出窗口时,我希望它是一个下拉列表,我们可以在触发时选择位于其下方的菜单。

我尝试使用 mat-sidenav-container 并给出了一些条件以根据条件打开菜单

 <mat-nav-list>
     <mat-list-item (click)="showSubmenu = !showSubmenu" class="parent">
          <span class="full-width" *ngIf="isExpanded || 
            isShowing">Users</span>
       <mat-icon mat-list-icon>supervisor_account</mat-icon>
        <mat-icon class="menu-button" [ngClass]="{'rotated' : 
          showSubmenu}" *ngIf="isExpanded || 
             isShowing">expand_more</maticon>
        </mat-list-item>
        <div class="submenu" [ngClass]="{'expanded' : showSubmenu}" 
           *ngIf="isShowing || isExpanded">
          <div [routerLink]="['users']" routerLinkActive="active" 
             (click)="toggleSide()">Add Users</div>
          </div>
    </mat-nav-list>
``in the above code. i would like to nest Manage Users under Users list item``` and my .ts file follows:

showSubmenu: boolean = false;
  isShowing = false;
  showSubSubMenu: boolean = false;
  isExpanded = true;

i …
Run Code Online (Sandbox Code Playgroud)

navigation nested submenu angular

2
推荐指数
1
解决办法
2万
查看次数

标签 统计

angular ×1

navigation ×1

nested ×1

submenu ×1