如何使用 Angular Material2 创建嵌套的折叠菜单?
How do you create a nested, collapsing menu with Angular Material2?
我正在 Angular Material2 中寻求对边栏内嵌套菜单的支持。默认情况下,顶层通常是关闭的,打开顶层会暴露嵌套的菜单项。
我认为这作为一个起点是有意义的,但是子导航项目在父项目之外呈现(很差):
<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创建过这种侧边栏菜单吗?
遗憾的是,截至目前,material 设计库未提供任何工具来执行您想要的操作。
一旦出来,你或许可以使用tree组件来实现你想要的。否则,您应该自己构建一个。我自己已经这样做了(不幸的是,在专有代码库中),我很乐意帮助解决具体问题。我使用嵌套的 <md-list>
s、<button md-icon-button>
s 和自定义动画来做到这一点。
我知道这是一个老问题,但对于其他访问此页面的人来说,和我一样寻找同样的东西,这里是我如何使用当前版本的 Angular Material (6.4. 6) 一旦你正确地完成了 CSS 样式,它就会很漂亮。
请注意,目前还没有官方支持此功能,您必须自己设置,这可以通过多种方式完成,但我选择仅使用 Angular Material 个组件。
这是带有一些注释的示例标记,使用一个对象作为您的导航链接:
<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,它添加了一些帮助程序来检测组件内的移动断点.看这里:Angular Material CDK Layout
此外,在这种情况下,我的组件文件除了从服务中提取要显示的正确导航对象外,实际上什么也没做,但这是我如何设置对象的示例(当然它们可以随心所欲)
[
{
heading: 'Dashboard',
icon: 'dashboard',
link: '/dashboard',
pages: []
},
{
heading: 'Main Heading',
icon: 'settings',
link: '/settings',
pages: [
{
title: 'Subpage',
link: '/settings/advanced',
icon: ''
}
]
}
]
我正在 Angular Material2 中寻求对边栏内嵌套菜单的支持。默认情况下,顶层通常是关闭的,打开顶层会暴露嵌套的菜单项。
我认为这作为一个起点是有意义的,但是子导航项目在父项目之外呈现(很差):
<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创建过这种侧边栏菜单吗?
遗憾的是,截至目前,material 设计库未提供任何工具来执行您想要的操作。
一旦出来,你或许可以使用tree组件来实现你想要的。否则,您应该自己构建一个。我自己已经这样做了(不幸的是,在专有代码库中),我很乐意帮助解决具体问题。我使用嵌套的 <md-list>
s、<button md-icon-button>
s 和自定义动画来做到这一点。
我知道这是一个老问题,但对于其他访问此页面的人来说,和我一样寻找同样的东西,这里是我如何使用当前版本的 Angular Material (6.4. 6) 一旦你正确地完成了 CSS 样式,它就会很漂亮。
请注意,目前还没有官方支持此功能,您必须自己设置,这可以通过多种方式完成,但我选择仅使用 Angular Material 个组件。
这是带有一些注释的示例标记,使用一个对象作为您的导航链接:
<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,它添加了一些帮助程序来检测组件内的移动断点.看这里:Angular Material CDK Layout
此外,在这种情况下,我的组件文件除了从服务中提取要显示的正确导航对象外,实际上什么也没做,但这是我如何设置对象的示例(当然它们可以随心所欲)
[
{
heading: 'Dashboard',
icon: 'dashboard',
link: '/dashboard',
pages: []
},
{
heading: 'Main Heading',
icon: 'settings',
link: '/settings',
pages: [
{
title: 'Subpage',
link: '/settings/advanced',
icon: ''
}
]
}
]