什么是具有嵌套下拉选项(如angular1)的材质设计angular2 / 4菜单
发布时间:2020-12-17 06:56:04 所属栏目:安全 来源:网络整理
导读:我真的想要整合angular2材质,注意以下菜单示例: https://material.angularjs.org/1.1.4/demo/menuBar 这是一个美女:http://codepen.io/anon/pen/zrdQwP 我喜欢你可以使用嵌套菜单,但是对于Angular 2/4演示,你看到的只有: https://material.angular.io/com
我真的想要整合angular2材质,注意以下菜单示例:
https://material.angularjs.org/1.1.4/demo/menuBar 这是一个美女:http://codepen.io/anon/pen/zrdQwP 我喜欢你可以使用嵌套菜单,但是对于Angular 2/4演示,你看到的只有: https://material.angular.io/components/component/menu 嵌套菜单没有示例!这是否可以使用Angular2材料?如果是这样,有人可以演示如何使用它吗?或者这是不可能的?如果Angular 2/4不能支持这个,而Angular 1.x可以… 解决方法
更新:
此功能已添加到2.0.0-beta.10découpage-panjandrum中 Example 以前的版本: 它计划在未来https://github.com/angular/material2/issues/1429 但现在我怀疑它是可能的.这是我的Plunker Material2 Menu Example,演示了这样的菜单 模板可能如下所示: <ng-container *ngFor="let item of items"> <button md-button [mdMenuTriggerFor]="menu" #trigger="mdMenuTrigger" [attr.data-level]="1" (mouseenter)="openMenu(trigger,1)"> {{item.text}} </button> <md-menu class="custom-menu" #menu="mdMenu" [overlapTrigger]="false" (close)="closeMenu()" xPosition="after"> <ng-container *ngTemplateOutlet="subMenu; context: { $implicit: item.items,level: 2 }"></ng-container> </md-menu> </ng-container> <ng-template #subMenu let-items let-level="level"> <ng-container *ngFor="let item of items"> <ng-container *ngIf="item.items && item.items.length else simpleTmpl"> <button *ngIf="!item.divider" md-menu-item [disabled]="item.disabled" [mdMenuTriggerFor]="menu" #trigger="mdMenuTrigger" [attr.data-level]="level" (mouseenter)="openMenu(trigger,level);" (click)="$event.stopPropagation()"> <span>{{item.text}}</span> <span *ngIf="item.extraText">{{item.extraText}}</span> <md-icon *ngIf="item.icon">{{item.icon}}</md-icon> </button> <md-menu class="sub-menu" #menu="mdMenu" [overlapTrigger]="false" xPosition="before" > <ng-container *ngTemplateOutlet="subMenu; context: { $implicit: item.items || [],level: level + 1 }"></ng-container> </md-menu> <md-divider *ngIf="item.divider" class="mat-divider"></md-divider> </ng-container> <ng-template #simpleTmpl> <button *ngIf="!item.divider" md-menu-item [disabled]="item.disabled" (click)="closeMenu()"> <span>{{item.text}}</span> <span *ngIf="item.extraText">{{item.extraText}}</span> </button> <md-divider *ngIf="item.divider" class="mat-divider"></md-divider> </ng-template> </ng-container> </ng-template> 您只需要声明项目定义: menuItems = [ { text: 'File',items: [ { text: 'Share' },{ text: 'New',icon: 'arrow_right',items: [ { text: 'Document' },{ text: 'Form' } ] },{ text: 'Print',extraText: 'Ctrl+P' } ] },{ text: 'Edit',} ]; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |