diff --git a/src/demo-app/menu/menu-demo.html b/src/demo-app/menu/menu-demo.html index 423b31d086ec..5b7fa0833faf 100644 --- a/src/demo-app/menu/menu-demo.html +++ b/src/demo-app/menu/menu-demo.html @@ -62,3 +62,54 @@ + +
+ + + +
diff --git a/src/lib/menu/README.md b/src/lib/menu/README.md index b3fe5cef0b6c..842d11be9a01 100644 --- a/src/lib/menu/README.md +++ b/src/lib/menu/README.md @@ -1,6 +1,6 @@ # md-menu -`md-menu` is a list of options that displays when triggered. You can read more about menus in the +`md-menu` is a list of options that displays when triggered. You can read more about menus in the [Material Design spec](https://material.google.com/components/menus.html). ### Not yet implemented @@ -114,8 +114,9 @@ Output: ### Customizing menu position -By default, the menu will display after and below its trigger. You can change this display position -using the `x-position` (`before | after`) and `y-position` (`above | below`) attributes. +By default, the menu will display after and below its trigger. You can change this display position +using the `x-position` (`before | after`) and `y-position` (`above | below`) attributes. The menu +can be positioned over the menu button or outside using `overlay-trigger` (`true | false`). *my-comp.html* ```html @@ -148,7 +149,8 @@ also adds `aria-hasPopup="true"` to the trigger element. | --- | --- | --- | | `x-position` | `before | after` | The horizontal position of the menu in relation to the trigger. Defaults to `after`. | | `y-position` | `above | below` | The vertical position of the menu in relation to the trigger. Defaults to `below`. | - +| `overlay-trigger` | `true | false` | Whether to have the menu show on top of the menu trigger or outside. Defaults to `true`. | + ### Trigger Programmatic API **Properties** diff --git a/src/lib/menu/menu-directive.ts b/src/lib/menu/menu-directive.ts index d532f3a7b981..1d77df7a7770 100644 --- a/src/lib/menu/menu-directive.ts +++ b/src/lib/menu/menu-directive.ts @@ -46,14 +46,18 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy { positionX: MenuPositionX = 'after'; positionY: MenuPositionY = 'below'; + overlayTrigger = true; @ViewChild(TemplateRef) templateRef: TemplateRef; @ContentChildren(MdMenuItem) items: QueryList; constructor(@Attribute('x-position') posX: MenuPositionX, - @Attribute('y-position') posY: MenuPositionY) { + @Attribute('y-position') posY: MenuPositionY, + @Attribute('overlay-trigger') trigger = true) { if (posX) { this._setPositionX(posX); } if (posY) { this._setPositionY(posY); } + + this.overlayTrigger = trigger; this._setPositionClasses(); } diff --git a/src/lib/menu/menu-panel.ts b/src/lib/menu/menu-panel.ts index 0d439cfefe5f..e4af12dd987a 100644 --- a/src/lib/menu/menu-panel.ts +++ b/src/lib/menu/menu-panel.ts @@ -4,6 +4,7 @@ import {MenuPositionX, MenuPositionY} from './menu-positions'; export interface MdMenuPanel { positionX: MenuPositionX; positionY: MenuPositionY; + overlayTrigger: boolean; templateRef: TemplateRef; close: EventEmitter; focusFirstItem: () => void; diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts index c0bc3716e2ec..6c3308dc7ff1 100644 --- a/src/lib/menu/menu-trigger.ts +++ b/src/lib/menu/menu-trigger.ts @@ -197,12 +197,15 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy { */ private _getPosition(): ConnectedPositionStrategy { const positionX: HorizontalConnectionPos = this.menu.positionX === 'before' ? 'end' : 'start'; - const positionY: VerticalConnectionPos = this.menu.positionY === 'above' ? 'bottom' : 'top'; - + const overlayY: VerticalConnectionPos = this.menu.positionY === 'above' ? 'bottom' : 'top'; + let originY = overlayY; + if (this.menu.overlayTrigger) { + originY = overlayY === 'top' ? 'bottom' : 'top'; + } return this._overlay.position().connectedTo( this._element, - {originX: positionX, originY: positionY}, - {overlayX: positionX, overlayY: positionY} + {originX: positionX, originY: originY}, + {overlayX: positionX, overlayY: overlayY} ); } diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts index 01a6eb3219e8..228677c43baa 100644 --- a/src/lib/menu/menu.spec.ts +++ b/src/lib/menu/menu.spec.ts @@ -195,6 +195,7 @@ class PositionedMenu { class CustomMenuPanel implements MdMenuPanel { positionX: MenuPositionX = 'after'; positionY: MenuPositionY = 'below'; + overlayTrigger: true; @ViewChild(TemplateRef) templateRef: TemplateRef; @Output() close = new EventEmitter(); focusFirstItem = () => {};