Menu菜单

在一个临时的面板上显示一组操作。

规则

  • 至少包含 2 个以上的菜单项。
  • 不应该被当做主要导航方式。

代码演示

菜单 

  1. import { Component, ViewEncapsulation } from '@angular/core';
  3. @Component({
  4.   selector: 'demo-menu-basic',
  5.   template: `
  6.     <div [ngClass]="[show ? 'menu-active' : '']">
  7.       <div>
  8.         <Navbar [leftContent]="'Menu'"
  9.                 [icon]="icon"
  10.                 (onLeftClick)="handleClick($event)"
  11.                 class="top-nav-bar">
  12.           Here is title
  13.         </Navbar>
  14.       </div>
  15.       <Menu *ngIf="show && initData"
  16.             class="foo-menu"
  17.             [data]="initData"
  18.             [value]="['1', '3']"
  19.             (onChange)="onChange($event)"
  20.             [height]="menuHeight">
  21.       </Menu>
  22.       <div *ngIf="show && !initData" style="width: 100%; height: 200px; display: flex; justify-content: center; align-items: center">
  23.         <ActivityIndicator [size]="'large'"></ActivityIndicator>
  24.       </div>
  25.       <div *ngIf="show" class="menu-mask1" (click)="onMaskClick()"></div>
  26.     </div>
  28.     <ng-template #icon>
  29.       <img src="https://gw.alipayobjects.com/zos/rmsportal/iXVHARNNlmdCGnwWxQPH.svg" class="am-icon am-icon-md" alt=""/>
  30.     </ng-template>
  31.   `,
  32.   styles: [
  33.     `
  34.       .foo-menu {
  35.         position: relative;
  36.         z-index: 1000 !important;
  37.       }
  39.       .menu-active .top-nav-bar {
  40.         z-index: 80;
  41.       }
  43.       .top-nav-bar {
  44.         position: relative;
  45.         background-color: #008ae6;
  46.         color: #fff;
  47.       }
  49.       .menu-mask1 {
  50.         content: ' ';
  51.         position: absolute;
  52.         top: 0;
  53.         width: 100%;
  54.         height: 100%;
  55.         background-color: #000;
  56.         opacity: 0.4;
  57.         z-index: 79;
  58.       }
  59.     `
  60.   ],
  61.   encapsulation: ViewEncapsulation.None
  62. })
  63. export class DemoMenuBasicComponent {
  64.   initData: Array<any>;
  65.   show: boolean = false;
  66.   menuHeight: number = document.documentElement.clientHeight * 0.6;
  67.   dataMenu: Array<any> = [
  68.     {
  69.       value: '1',
  70.       label: 'Food',
  71.       children: [
  72.         {
  73.           label: 'All Foods',
  74.           value: '1',
  75.           disabled: false
  76.         },
  77.         {
  78.           label: 'Chinese Food',
  79.           value: '2'
  80.         },
  81.         {
  82.           label: 'Hot Pot',
  83.           value: '3'
  84.         },
  85.         {
  86.           label: 'Buffet',
  87.           value: '4'
  88.         },
  89.         {
  90.           label: 'Fast Food',
  91.           value: '5'
  92.         },
  93.         {
  94.           label: 'Snack',
  95.           value: '6'
  96.         },
  97.         {
  98.           label: 'Bread',
  99.           value: '7'
  100.         },
  101.         {
  102.           label: 'Fruit',
  103.           value: '8'
  104.         },
  105.         {
  106.           label: 'Noodle',
  107.           value: '9'
  108.         },
  109.         {
  110.           label: 'Leisure Food',
  111.           value: '10'
  112.         }
  113.       ]
  114.     },
  115.     {
  116.       value: '2',
  117.       label: 'Supermarket',
  118.       children: [
  119.         {
  120.           label: 'All Supermarkets',
  121.           value: '1'
  122.         },
  123.         {
  124.           label: 'Supermarket',
  125.           value: '2',
  126.           disabled: true
  127.         },
  128.         {
  129.           label: 'C-Store',
  130.           value: '3'
  131.         },
  132.         {
  133.           label: 'Personal Care',
  134.           value: '4'
  135.         }
  136.       ]
  137.     },
  138.     {
  139.       value: '3',
  140.       label: 'Extra',
  141.       isLeaf: true,
  142.       children: [
  143.         {
  144.           label: 'you can not see',
  145.           value: '1'
  146.         }
  147.       ]
  148.     }
  149.   ];
  151.   onChange(value) {
  152.     let label = '';
  153.     this.dataMenu.forEach(dataItem => {
  154.       if (dataItem.value === value[0]) {
  155.         label = dataItem.label;
  156.         if (dataItem.children && value[1]) {
  157.           for (let i = 0; i < dataItem.children.length; i++) {
  158.             const cItem = dataItem.children[i];
  159.             if (cItem.value === value[1]) {
  160.               label += cItem.label;
  161.             }
  162.           }
  163.         }
  164.       }
  165.     });
  166.     console.log(label);
  167.   }
  169.   handleClick(e) {
  170.     e.preventDefault();
  171.     this.show = !this.show;
  172.     if (!this.initData) {
  173.       setTimeout(() => {
  174.         this.initData = this.dataMenu;
  175.       }, 500);
  176.     }
  177.   }
  179.   onMaskClick() {
  180.     this.show = false;
  181.   }
  182. }

单级菜单 

  1. import { Component, ViewEncapsulation } from '@angular/core';
  3. @Component({
  4.   selector: 'demo-menu-singleSelect',
  5.   template: `
  6.     <div [ngClass]="[show ? 'single-menu-active' : '']">
  7.       <div>
  8.         <Navbar class="single-top-nav-bar"
  9.                 [leftContent]="'Menu'"
  10.                 (onLeftClick)="handleClick($event)"
  11.         >
  12.           Here is title
  13.         </Navbar>
  14.       </div>
  15.       <Menu *ngIf="show && initData"
  16.             class="single-foo-menu"
  17.             [data]="initData"
  18.             [value]="['1']"
  19.             [level]="1"
  20.             (onChange)="onChange($event)"
  21.             [height]="menuHeight">
  22.       </Menu>
  23.       <div *ngIf="show && !initData" style="width: 100% ;height: 200px; display: flex; justify-content: center; align-items: center">
  24.         <ActivityIndicator [size]="'large'"></ActivityIndicator>
  25.       </div>
  26.       <div *ngIf="show" class="menu-mask2" (click)="onMaskClick()"></div>
  27.     </div>
  28.   `,
  29.   styles: [
  30.     `
  31.       .single-foo-menu {
  32.         position: absolute;
  33.         z-index: 90 !important;
  34.         width: 100%;
  35.       }
  37.       .single-menu-active .single-top-nav-bar {
  38.         z-index: 90;
  39.       }
  41.       .single-top-nav-bar {
  42.         position: relative;
  43.         background-color: #008ae6;
  44.         color: #fff;
  45.       }
  47.       .menu-mask2 {
  48.         position: absolute;
  49.         top: 0;
  50.         width: 100%;
  51.         height: 100%;
  52.         background-color: #000;
  53.         opacity: 0.4;
  54.         z-index: 89;
  55.       }
  56.     `
  57.   ],
  58.   encapsulation: ViewEncapsulation.None
  59. })
  60. export class DemoMenuSingleSelectComponent {
  61.   initData: Array<any>;
  62.   show: boolean = false;
  63.   menuHeight: number = document.documentElement.clientHeight * 0.6;
  64.   data: Array<any> = [
  65.     {
  66.       value: '1',
  67.       label: 'Food'
  68.     },
  69.     {
  70.       value: '2',
  71.       label: 'Supermarket'
  72.     },
  73.     {
  74.       value: '3',
  75.       label: 'Extra',
  76.       isLeaf: true
  77.     }
  78.   ];
  80.   onChange(value) {
  81.     console.log(value);
  82.   }
  84.   handleClick(e) {
  85.     e.preventDefault();
  86.     this.show = !this.show;
  87.     if (!this.initData) {
  88.       setTimeout(() => {
  89.         this.initData = this.data;
  90.       }, 500);
  91.     }
  92.   }
  94.   onMaskClick() {
  95.     this.show = false;
  96.   }
  97. }

菜单多选 

  1. import { Component, ViewEncapsulation } from '@angular/core';
  3. @Component({
  4.   selector: 'demo-menu-multiSelect',
  5.   template: `
  6.     <div [ngClass]="[show ? 'multi-menu-active' : '']">
  7.       <div>
  8.         <Navbar [leftContent]="'Menu'"
  9.                 (onLeftClick)="handleClick($event)"
  10.                 class="multi-top-nav-bar">
  11.           Here is title
  12.         </Navbar>
  13.       </div>
  14.       <Menu *ngIf="show && initData"
  15.             class="multi-foo-menu"
  16.             [data]="initData"
  17.             [value]="['1', ['3', '4']]"
  18.             [multiSelect]="true"
  19.             (onChange)="onChange($event)"
  20.             (onOk)="onOk($event)"
  21.             (onCancel)="onCancel()"
  22.             [height]="menuHeight">
  23.       </Menu>
  24.       <div *ngIf="show && !initData" style="width: 100% ;height: 200px; display: flex; justify-content: center; align-items: center">
  25.         <ActivityIndicator [size]="'large'"></ActivityIndicator>
  26.       </div>
  27.       <div *ngIf="show" class="menu-mask3" (click)="onMaskClick()"></div>
  28.     </div>
  30.   `,
  31.   styles: [
  32.     `
  33.       .multi-foo-menu {
  34.         position: absolute;
  35.         z-index: 80 !important;
  36.         width: 100%;
  37.       }
  39.       .multi-menu-active .multi-top-nav-bar {
  40.         z-index: 80;
  41.       }
  43.       .multi-top-nav-bar {
  44.         position: relative;
  45.         background-color: #008ae6;
  46.         color: #fff;
  47.       }
  49.       .menu-mask3 {
  50.         content: ' ';
  51.         position: absolute;
  52.         top: 0;
  53.         width: 100%;
  54.         height: 100%;
  55.         background-color: #000;
  56.         opacity: 0.4;
  57.         z-index: 79;
  58.       }
  59.     `
  60.   ],
  61.   encapsulation: ViewEncapsulation.None
  62. })
  63. export class DemoMenuMultiSelectComponent {
  64.   initData: Array<any>;
  65.   show: boolean = false;
  66.   menuHeight: number = document.documentElement.clientHeight * 0.6;
  67.   dataMenu: Array<any> = [
  68.     {
  69.       value: '1',
  70.       label: 'Food',
  71.       children: [
  72.         {
  73.           label: 'All Foods',
  74.           value: '1',
  75.           disabled: false
  76.         },
  77.         {
  78.           label: 'Chinese Food',
  79.           value: '2'
  80.         },
  81.         {
  82.           label: 'Hot Pot',
  83.           value: '3'
  84.         },
  85.         {
  86.           label: 'Buffet',
  87.           value: '4'
  88.         },
  89.         {
  90.           label: 'Fast Food',
  91.           value: '5'
  92.         },
  93.         {
  94.           label: 'Snack',
  95.           value: '6'
  96.         },
  97.         {
  98.           label: 'Bread',
  99.           value: '7'
  100.         },
  101.         {
  102.           label: 'Fruit',
  103.           value: '8'
  104.         },
  105.         {
  106.           label: 'Noodle',
  107.           value: '9'
  108.         },
  109.         {
  110.           label: 'Leisure Food',
  111.           value: '10'
  112.         }
  113.       ]
  114.     },
  115.     {
  116.       value: '2',
  117.       label: 'Supermarket',
  118.       children: [
  119.         {
  120.           label: 'All Supermarkets',
  121.           value: '1'
  122.         },
  123.         {
  124.           label: 'Supermarket',
  125.           value: '2',
  126.           disabled: true
  127.         },
  128.         {
  129.           label: 'C-Store',
  130.           value: '3'
  131.         },
  132.         {
  133.           label: 'Personal Care',
  134.           value: '4'
  135.         }
  136.       ]
  137.     },
  138.     {
  139.       value: '3',
  140.       label: 'Extra',
  141.       isLeaf: true,
  142.       children: [
  143.         {
  144.           label: 'you can not see',
  145.           value: '1'
  146.         }
  147.       ]
  148.     }
  149.   ];
  151.   onChange(value) {
  152.     console.log(value);
  153.   }
  155.   handleClick(e) {
  156.     e.preventDefault();
  157.     this.show = !this.show;
  158.     if (!this.initData) {
  159.       setTimeout(() => {
  160.         this.initData = this.dataMenu;
  161.       }, 500);
  162.     }
  163.   }
  165.   onMaskClick() {
  166.     this.show = false;
  167.   }
  169.   onOk(value) {
  170.     console.log(value);
  171.     this.onCancel();
  172.   }
  174.   onCancel() {
  175.     this.show = false;
  176.   }
  177. }

单级菜单多选 

  1. import { Component, ViewEncapsulation } from '@angular/core';
  3. @Component({
  4.   selector: 'demo-menu-singleMulti',
  5.   template: `
  6.     <div [ngClass]="[show ? 'single-multi-menu-active' : '']">
  7.       <div>
  8.         <Navbar [leftContent]="'Menu'"
  9.                 (onLeftClick)="handleClick($event)"
  10.                 class="single-multi-top-nav-bar">
  11.           Here is title
  12.         </Navbar>
  13.       </div>
  14.       <Menu *ngIf="show && initData"
  15.             class="single-multi-foo-menu"
  16.             [data]="initData"
  17.             [value]="['1']"
  18.             [level]="1"
  19.             [multiSelect]="true"
  20.             (onChange)="onChange($event)"
  21.             (onOk)="onOk($event)"
  22.             (onCancel)="onCancel()"
  23.             [height]="menuHeight">
  24.       </Menu>
  25.       <div *ngIf="show && !initData" style="width: 100% ;height: 200px; display: flex; justify-content: center; align-items: center">
  26.         <ActivityIndicator [size]="'large'"></ActivityIndicator>
  27.       </div>
  28.       <div *ngIf="show" class="menu-mask4" (click)="onMaskClick()"></div>
  29.     </div>
  30.   `,
  31.   styles: [
  32.     `
  33.       .single-multi-foo-menu {
  34.         position: absolute;
  35.         z-index: 70 !important;
  36.         width: 100%;
  37.       }
  39.       .single-multi-menu-active .single-multi-top-nav-bar {
  40.         z-index: 80;
  41.       }
  43.       .single-multi-top-nav-bar {
  44.         position: relative;
  45.         background-color: #008ae6;
  46.         color: #fff;
  47.       }
  49.       .menu-mask4 {
  50.         content: ' ';
  51.         position: absolute;
  52.         top: 0;
  53.         width: 100%;
  54.         height: 100%;
  55.         background-color: #000;
  56.         opacity: 0.4;
  57.         z-index: 69;
  58.       }
  59.     `
  60.   ],
  61.   encapsulation: ViewEncapsulation.None
  62. })
  63. export class DemoMenuSingleMultiComponent {
  64.   initData: Array<any>;
  65.   show: boolean = false;
  66.   menuHeight: number = document.documentElement.clientHeight * 0.6;
  67.   data: Array<any> = [
  68.     {
  69.       value: '1',
  70.       label: 'Food'
  71.     },
  72.     {
  73.       value: '2',
  74.       label: 'Supermarket'
  75.     },
  76.     {
  77.       value: '3',
  78.       label: 'Extra',
  79.       isLeaf: true
  80.     }
  81.   ];
  83.   onChange(value) {
  84.     console.log(value);
  85.   }
  87.   handleClick(e) {
  88.     e.preventDefault();
  89.     this.show = !this.show;
  90.     if (!this.initData) {
  91.       setTimeout(() => {
  92.         this.initData = this.data;
  93.       }, 500);
  94.     }
  95.   }
  97.   onMaskClick() {
  98.     this.show = false;
  99.   }
  101.   onOk(value) {
  102.     console.log(value);
  103.     this.onCancel();
  104.   }
  106.   onCancel() {
  107.     console.log('onCancel');
  108.     this.show = false;
  109.   }
  110. }

Menu 菜单 - 图1

API

属性说明类型默认值
data数据(isLeaf 设置后 children 无效)Array<{label: string, value, disabled?, children<data>?, isLeaf?}>[]
level菜单级数，可选1/2number2
value初始值，一级和二级筛选数据的value组成的数组。在多选状态下，如果为二级菜单，则数组的第一个元素为一级菜单的选项，数组的第二个元素是一个数组，里面包含了二级菜单的多选项；如果为一级菜单，则数组所有元素都是多选项Array
onChange选择后的回调函数(item: Object): void
onOk多选状态下确认按钮回调(value: Object): void
onCancel多选状态下取消按钮回调(): void
height筛选组件的高度numberdocument.documentElement.clientHeight / 2
multiSelect是否支持菜单多选booleanfalse