angular-material-app documentation
  1. Components
  2. MenuComponent

File

src/app/materials/menu/menu.component.ts

Implements

OnInit

Metadata

selector app-menu
styleUrls ./menu.component.scss
templateUrl ./menu.component.html

Index

Methods

Constructor

constructor()
Defined in src/app/materials/menu/menu.component.ts:8

Methods

ngOnInit
ngOnInit()
Defined in src/app/materials/menu/menu.component.ts:12
Returns : void 
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}
Copy
<mat-card>
  <mat-card-title>Basic menu</mat-card-title>
  <mat-card-content>
    <button mat-icon-button [matMenuTriggerFor]="menu">
      <mat-icon>grade</mat-icon>
    </button>

    <mat-menu #menu="matMenu">
      <button mat-menu-item> 刷新 </button>
      <button mat-menu-item> 设置 </button>
      <button mat-menu-item> 帮助 </button>
      <button mat-menu-item disabled> 退出 </button>
    </mat-menu>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Icons Menu</mat-card-title>
  <mat-card-content>
    <button mat-icon-button [matMenuTriggerFor]="menu2">
      <mat-icon>more_vert</mat-icon>
    </button>

    <mat-menu #menu2="matMenu">
      <button mat-menu-item>
        <mat-icon> dialpad </mat-icon>
        <span> Redial </span>
      </button>
      <button mat-menu-item disabled>
        <mat-icon> voicemail </mat-icon>
        <span> Check voicemail </span>
      </button>
      <button mat-menu-item>
        <mat-icon> notifications_off </mat-icon>
        <span> Disable alerts </span>
      </button>
    </mat-menu>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Nested Menu</mat-card-title>
  <mat-card-content>
    <button mat-button [matMenuTriggerFor]="animals">Animal index</button>

    <mat-menu #animals="matMenu">
      <button mat-menu-item [matMenuTriggerFor]="vertebrates">Vertebrates</button>
      <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
    </mat-menu>

    <mat-menu #vertebrates="matMenu">
      <button mat-menu-item [matMenuTriggerFor]="fish">Fishes</button>
      <button mat-menu-item [matMenuTriggerFor]="amphibians">Amphibians</button>
      <button mat-menu-item [matMenuTriggerFor]="reptiles">Reptiles</button>
      <button mat-menu-item>Birds</button>
      <button mat-menu-item>Mammals</button>
    </mat-menu>

    <mat-menu #invertebrates="matMenu">
      <button mat-menu-item>Insects</button>
      <button mat-menu-item>Molluscs</button>
      <button mat-menu-item>Crustaceans</button>
      <button mat-menu-item>Corals</button>
      <button mat-menu-item>Arachnids</button>
      <button mat-menu-item>Velvet worms</button>
      <button mat-menu-item>Horseshoe crabs</button>
    </mat-menu>

    <mat-menu #fish="matMenu">
      <button mat-menu-item>Baikal oilfish</button>
      <button mat-menu-item>Bala shark</button>
      <button mat-menu-item>Ballan wrasse</button>
      <button mat-menu-item>Bamboo shark</button>
      <button mat-menu-item>Banded killifish</button>
    </mat-menu>

    <mat-menu #amphibians="matMenu">
      <button mat-menu-item>Sonoran desert toad</button>
      <button mat-menu-item>Western toad</button>
      <button mat-menu-item>Arroyo toad</button>
      <button mat-menu-item>Yosemite toad</button>
    </mat-menu>

    <mat-menu #reptiles="matMenu">
      <button mat-menu-item>Banded Day Gecko</button>
      <button mat-menu-item>Banded Gila Monster</button>
      <button mat-menu-item>Black Tree Monitor</button>
      <button mat-menu-item>Blue Spiny Lizard</button>
      <button mat-menu-item disabled>Velociraptor</button>
    </mat-menu>

  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Lazy rendering</mat-card-title>
  <mat-card-content>
    <mat-menu #appMenu="matMenu">
      <ng-template matMenuContent>
        <button mat-menu-item>Settings</button>
        <button mat-menu-item>Help</button>
      </ng-template>
    </mat-menu>

    <button mat-icon-button [matMenuTriggerFor]="appMenu">
      <mat-icon>more_vert</mat-icon>
    </button>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Passing in data to a menu</mat-card-title>
  <mat-card-content>
    <mat-menu #appMenu="matMenu">
      <ng-template matMenuContent let-name="name">
        <button mat-menu-item>Settings</button>
        <button mat-menu-item>Log off {{name}}</button>
      </ng-template>
    </mat-menu>

    <button mat-icon-button [matMenuTriggerFor]="appMenu" [matMenuTriggerData]="{name: 'Sally'}">
      <mat-icon>more_vert</mat-icon>
    </button>

    <button mat-icon-button [matMenuTriggerFor]="appMenu" [matMenuTriggerData]="{name: 'Bob'}">
      <mat-icon>more_vert</mat-icon>
    </button>
  </mat-card-content>
</mat-card>
Copy

./menu.component.scss 

mat-card {
  margin: 24px;
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""