docs(menu): menu positioning docs

src/material-examples/example-module.ts

@@ -72,6 +72,7 @@ import {ListSectionsExample} from './list-sections/list-sections-example';
 import {ListSelectionExample} from './list-selection/list-selection-example';
 import {MenuIconsExample} from './menu-icons/menu-icons-example';
 import {MenuOverviewExample} from './menu-overview/menu-overview-example';
+import {MenuPositionsExample} from './menu-positions/menu-positions-example';
 import {NestedMenuExample} from './nested-menu/nested-menu-example';
 import {PaginatorConfigurableExample} from './paginator-configurable/paginator-configurable-example';
 import {PaginatorOverviewExample} from './paginator-overview/paginator-overview-example';
@@ -482,6 +483,12 @@ export const EXAMPLE_COMPONENTS = {
     additionalFiles: null,
     selectorName: null
   },
+  'menu-positions': {
+    title: 'Menu positions',
+    component: MenuPositionsExample,
+    additionalFiles: null,
+    selectorName: null
+  },
   'nested-menu': {
     title: 'Nested menu',
     component: NestedMenuExample,
@@ -868,6 +875,7 @@ export const EXAMPLE_LIST = [
   ListSelectionExample,
   MenuIconsExample,
   MenuOverviewExample,
+  MenuPositionsExample,
   NestedMenuExample,
   PaginatorConfigurableExample,
   PaginatorOverviewExample,

src/material-examples/menu-positions/menu-positions-example.css

@@ -0,0 +1,14 @@
+.example-menu-positions-container {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 16px;
+}
+
+.example-radio-group {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.example-radio-group .mat-radio-button {
+  margin-bottom: 8px;
+}

src/material-examples/menu-positions/menu-positions-example.html

@@ -0,0 +1,28 @@
+<mat-card class="mat-typography">
+  <div class="example-menu-positions-container">
+    <div>
+      <h3>xPosition</h3>
+      <mat-radio-group [(ngModel)]="xPosition" class="example-radio-group">
+        <mat-radio-button value="before">before</mat-radio-button>
+        <mat-radio-button value="after">after</mat-radio-button>
+      </mat-radio-group>
+    </div>
+    <div>
+      <h3>YPosition</h3>
+      <mat-radio-group [(ngModel)]="yPosition" class="example-radio-group">
+        <mat-radio-button value="above">above</mat-radio-button>
+        <mat-radio-button value="below">below</mat-radio-button>
+      </mat-radio-group>
+    </div>
+    <div>
+      <h3>overlapTrigger</h3>
+      <mat-checkbox [(ngModel)]="overlapTrigger">overlap trigger?</mat-checkbox>
+    </div>
+  </div>
+  <button mat-button [matMenuTriggerFor]="menu">Menu</button>
+  <mat-menu #menu [yPosition]="yPosition" [xPosition]="xPosition" [overlapTrigger]="overlapTrigger">
+    <button mat-menu-item>Item 1</button>
+    <button mat-menu-item>Item 2</button>
+    <button mat-menu-item>Item 3</button>
+  </mat-menu>
+</mat-card>

src/material-examples/menu-positions/menu-positions-example.ts

@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Menu positions
+ */
+@Component({
+  selector: 'menu-positions-example',
+  templateUrl: 'menu-positions-example.html',
+  styleUrls: ['menu-positions-example.css'],
+})
+export class MenuPositionsExample {
+  xPosition = 'after';
+  yPosition = 'below';
+  overlapTrigger = false;
+}