• Menu菜单
    • 规则
  • 代码演示
  • API

    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