如何使用Angular Material2创建嵌套的折叠菜单? [英] How do you create a nested, collapsing menu with Angular Material2?

问题描述

我正在Angular Material2中寻求对侧边栏中嵌套菜单的支持.默认情况下，顶层通常会关闭，而打开顶层会显示嵌套菜单项.

I am looking for support within Angular Material2 for nested menus within a sidebar. The top level would typically be closed by default, and opening a top level would expose nested menu items.

我认为这是有道理的，但是子导航项(差)呈现在父项之外:

I thought this made sense as a starting point, but the child nav items render (poorly) outside of the parent items:

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>

有人用@ angular/material创建这种侧边栏菜单吗?

Has anyone created this kind of sidebar menu with @angular/material?

推荐答案

我知道这是一个古老的问题，但是对于其他访问此页面的人来说，和我一样，这是我如何处理的当前版本的Angular Material(6.4.6)，一旦正确完成CSS样式，它就会很漂亮.

I know this is an old question, but for others coming upon this page looking for the same thing, as I did, here's how I took care of it with the current version of Angular Material (6.4.6) and once you get the CSS styles done right, it works beautifully.

请注意，此功能尚无官方支持，您必须自行设置，可以通过多种方式进行设置，但我选择仅使用Angular Material组件.

Please note that there still is no official support for this functionality, and you have to set it up yourself, which could be done a number of ways, but I chose to use only Angular Material components.

下面是带有一些注释的示例标记，为您的导航链接使用了一个对象:

Here's example markup with some comments, using an object for your nav links:

<mat-sidenav-container>
  <mat-sidenav #sidenav
    class="sidenav"
    [mode]="mobileQuery.matches ? 'over' : 'side'"
    [opened]="mobileQuery.matches ? false : true">
    <mat-nav-list>
      <!-- wrap all the nav items in an accordion panel -->
      <mat-accordion [displayMode]="flat">
        <div *ngFor="let navItem of navList">

          <!-- use a simple div for an item that has no children,
            match up the styling to the expansion panel styles -->
          <div class="nav-head" *ngIf="navItem.pages.length === 0">
            <a class="nav-link"
              [routerLink]="navItem.link"
              routerLinkActive="selected"
              (click)="closeSidenav()">
              <mat-icon>{{navItem.icon}}</mat-icon>
              <span class="nav-link-text">{{navItem.heading}}</span>
            </a>
          </div>

          <!-- use expansion panel for heading item with sub page links -->
          <mat-expansion-panel *ngIf="navItem.pages.length > 0"
            class="mat-elevation-z0">
            <mat-expansion-panel-header class="nav-head" [expandedHeight]="'48px'">
              <mat-panel-title class="nav-link">
                <mat-icon>{{navItem.icon}}</mat-icon>
                <span class="nav-link-text">{{navItem.heading}}</span>
              </mat-panel-title>
            </mat-expansion-panel-header>

            <div class="nav-section">
              <!-- loop through all your sub pages inside the expansion panel content -->
              <div *ngFor="let navPage of navItem.pages"
                class="nav-item">
                <a class="nav-link"
                  [routerLink]="navPage.link"
                  routerLinkActive="selected"
                  (click)="closeSidenav()">{{navPage.title}}</a>
              </div>
            </div>
          </mat-expansion-panel>
        </div>
      </mat-accordion>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <div class="container-fluid">
      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

编辑:为回答几个其他问题，mobileQuery来自Angular Material CDK，它添加了一些帮助程序来检测组件内部的移动断点.参见此处:角度材料CDK布局

EDIT: To answer a couple of additional questions that were made, mobileQuery is coming from the Angular Material CDK which adds some helpers for detecting mobile breakpoints inside your components. See here: Angular Material CDK Layout

此外，在这种情况下，除了从服务中提取要显示的正确导航对象之外，我的组件文件实际上不执行任何操作，但这是我设置对象的示例(当然，它们可以是任何东西你需要他们成为)

Also, my component file really doesn't do anything in this case other than pull the correct nav object to be displayed from a service, but here is an example of how I set up the objects (of course they could be whatever you need them to be)

[
  {
    heading: 'Dashboard',
    icon: 'dashboard',
    link: '/dashboard',
    pages: []
  },
  {
    heading: 'Main Heading',
    icon: 'settings',
    link: '/settings',
    pages: [
      {
        title: 'Subpage',
        link: '/settings/advanced',
        icon: ''
      }
    ]
  }
]

这篇关于如何使用Angular Material2创建嵌套的折叠菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！