ipsos-components
Version:
Material Design components for Angular
54 lines (46 loc) • 1.43 kB
HTML
<div class="demo-menu">
<section>
<h2>Icon Trigger</h2>
<mat-menu #menu1="matMenu">
<button mat-menu-item> Settings </button>
<button mat-menu-item> Help </button>
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="menu1" aria-label="Open Menu">
<mat-icon>more_vert</mat-icon>
</button>
</section>
<section>
<h2>Menu with Icons</h2>
<button mat-icon-button [matMenuTriggerFor]="menu2" aria-label="Open Menu">
<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>
<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>
</section>
<section>
<h2>Menu with links</h2>
<button mat-icon-button [matMenuTriggerFor]="menu2" aria-label="Learn more about Angular">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu2="matMenu">
<a href="http://angular.io" mat-menu-item>
Angular
</a>
<a href="http://material.angular.io" mat-menu-item>
Angular Material
</a>
</mat-menu>
</section>
</div>