什么是带有嵌套下拉选项(如 angular1)的材料设计 angular2/4 菜单的示例?

问题描述

我真的很想合并 angular2 材质，注意到以下菜单示例:

https://material.angularjs.org/1.1.4/demo/menuBar

这是一种美:模板可能如下所示:

<button md-button [mdMenuTriggerFor]="menu" #trigger="mdMenuTrigger" [attr.data-level]="1" (mouseenter)="openMenu(trigger, 1)">{{item.text}}<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-菜单></ng-容器><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]="菜单"#trigger="mdMenuTrigger"[attr.data-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><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-菜单><md-divider *ngIf="item.divider" class="mat-divider"></md-divider></ng-容器><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><md-divider *ngIf="item.divider" class="mat-divider"></md-divider></ng-模板></ng-容器></ng-模板>

您只需要声明项目定义:

menuItems = [{文本文件'，项目: [{文字:'分享'},{文字:'新'，图标:'arrow_right'，项目: [{文本:'文档'},{文字:'表格'}]},{文本:'打印'，extraText: 'Ctrl+P'}]},{文字:'编辑'，}];

I really want to incorporate angular2 material, noticed the following menu example:

https://material.angularjs.org/1.1.4/demo/menuBar

This is a beauty: http://codepen.io/anon/pen/zrdQwP

I like how you can have nested menus, but for the Angular 2/4 demo, all you see is this:

https://material.angular.io/components/component/menu

There is no example with nested menus! Is this possible with Angular2 + Material? If so, can someone demonstrate how to use this? Or is this just not possible? Seems fishy if Angular 2/4 can't support this while Angular 1.x can...

解决方案

Update:

This feature was added in 2.0.0-beta.10 découpage-panjandrum

Example

Previous version:

It is planned in future https://github.com/angular/material2/issues/1429

But now i suspect it is possible. Here is my Plunker Material2 Menu Example that demonstrates such menu

Template might look like this:

<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>

You need only to declare items definitions:

menuItems = [
  {
    text: 'File',
    items: [
      {
        text: 'Share'
      },
      {
        text: 'New',
        icon: 'arrow_right',
        items: [
          {
            text: 'Document'
          },
          {
            text: 'Form'
          }
        ]
      },
      {
        text: 'Print',
        extraText: 'Ctrl+P'
      }
    ]
  },
  {
    text: 'Edit',
  }
];

这篇关于什么是带有嵌套下拉选项(如 angular1)的材料设计 angular2/4 菜单的示例?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！