- 首页
- 其他开发
- 如何使用 Angular Material2 创建嵌套的折叠菜单?
如何使用 Angular Material2 创建嵌套的折叠菜单?
[英] How do you create a nested, collapsing menu with Angular Material2?
本文介绍了如何使用 Angular Material2 创建嵌套的折叠菜单?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在 Angular Material2 中寻找对侧边栏中嵌套菜单的支持.默认情况下，顶层通常是关闭的，打开顶层会暴露嵌套的菜单项.
我认为这是一个起点，但是子导航项在父项之外呈现(很差):
plnkr
<md-sidenav #sidenav class="my-sidenav"><md-list><md-list-item><h3 md-line>第一父 </h3><md-导航列表><a md-list-item href="#">第一个孩子</a><a md-list-item href="#">第二个孩子</a><a md-list-item href="#">第三个孩子</a></md-nav-list></md-list-item><md-list-item><h3 md-line>第二个父 </h3><md-导航列表><a md-list-item href="#">第一个孩子</a><a md-list-item href="#">第二个孩子</a></md-nav-list></md-list-item></md-list></md-sidenav><div class="my-container"><button md-button (click)="sidenav.open()">打开</button>
</md-sidenav-container>
有没有人用@angular/material 创建过这种侧边栏菜单?
解决方案
我知道这是一个老问题，但是对于其他人来到这个页面寻找同样的事情，就像我一样，这是我如何处理它的Angular Material (6.4.6) 的当前版本，一旦你正确地完成了 CSS 样式，它就可以很好地工作.
请注意，此功能仍然没有官方支持，您必须自己设置，这可以通过多种方式完成，但我选择仅使用 Angular Material 组件.
这是带有一些注释的示例标记，为您的导航链接使用一个对象:
<mat-sidenav #sidenavclass =sidenav"[模式]=mobileQuery.matches ?'over' : '侧面'";[opened]="mobileQuery.matches ?假:真"><mat-nav-list><!-- 将所有导航项目包装在一个手风琴面板中--><mat-accordion [displayMode]=flat"><div *ngFor="let navItem of navList"><!-- 对没有子项的项使用简单的 div，将样式与扩展面板样式相匹配 --><div class="nav-head";*ngIf=navItem.pages.length === 0"><a class="nav-link";[routerLink]="navItem.link";routerLinkActive=已选择"(点击)=closeSidenav()"><mat-icon>{{navItem.icon}}</mat-icon><span class="nav-link-text">{{navItem.heading}}</span></a>
<!-- 将扩展面板用于带有子页面链接的标题项目--><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"><!-- 循环浏览扩展面板内容中的所有子页面--><div *ngFor="let navPage of navItem.pages";class="nav-item"><a class="nav-link";[routerLink]="navPage.link";routerLinkActive=已选择"(click)=closeSidenav()">{{navPage.title}}</a>
</mat-expansion-panel>
</mat-accordion></mat-nav-list></mat-sidenav><mat-sidenav-content><div class="container-fluid"><路由器插座></路由器插座>
</mat-sidenav-content></mat-sidenav-container>
编辑:为了回答一些额外的问题，mobileQuery 来自 Angular Material CDK，它添加了一些帮助程序来检测组件内的移动断点.请参阅此处:Angular Material CDK 布局
此外，在这种情况下，除了从服务中提取要显示的正确导航对象之外，我的组件文件实际上并没有做任何事情，但这里是我如何设置对象的示例(当然，它们可以是任何对象)你需要他们)
[{标题:'仪表板'，图标:仪表板"，链接:'/仪表板'，页数:[]},{标题:'主标题'，图标:设置"，链接:'/设置'，页数:[{title: '子页面',链接:'/设置/高级'，图标: ''}]}]
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>
Has anyone created this kind of sidebar menu with @angular/material?
解决方案
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.
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>
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屋！
查看全文
