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

单级菜单

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

菜单多选

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

单级菜单多选

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

Menu菜单 - 图1

API

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