Blox Material v1.0.0

Menu Surface

Menu Surfaces (`mdcMenuSurface`) are reusable surfaces that appear above the content of the page when in view. They can be positioned adjacent to an element that triggers the activation (e.g. the provided `mdcMenuAnchor` directive).

Menu Surfaces are used by mdcMenu, and mdcSelectMenu. But they can also be used on their own.

API

Directive: MdcMenuSurfaceDirective

Selector: [mdcMenuSurface] [mdcMenu] [mdcSelectMenu]

The mdcMenuSurface is a reusable surface that appears above the content of the page and can be positioned adjacent to an element. It is required as the surface for an mdcMenu but can also be used by itself.

Property Description
@Input()
menuAnchor
MdcMenuAnchorDirective | Element | null

Assign an (optional) element or mdcMenuAnchor. If set the menu will position itself relative to this anchor element. Assigning this property is not needed if you wrap your surface inside an mdcMenuAnchor.
@Input()
viewport
HTMLElement | null

Assign any HTMLElement to this property to use as the viewport instead of the window object. The menu will choose to open from the top or bottom, and from the left or right, based on the space available inside the viewport.

You should probably not use this property. We only use it to keep the documentation snippets on our demo website contained in their window.
@Output()
openChange
EventEmitter<boolean>

Event emitted when the menu is opened or closed. (When this event is triggered, the surface is starting to open/close, but the animation may not have fully completed yet).
@Output()
afterOpened
EventEmitter<void>

Event emitted after the menu has fully opened. When this event is emitted the full opening animation has completed, and the menu is visible.
@Output()
afterClosed
EventEmitter<void>

Event emitted after the menu has fully closed. When this event is emitted the full closing animation has completed, and the menu is not visible anymore.
@Input()
open
boolean

When this input is defined and does not have value false, the menu will be opened, otherwise the menu will be closed.
@Input()
openFrom
'tl' | 'tr' | 'bl' | 'br' | 'ts' | 'te' | 'bs' | 'be'

Set this value if you want to customize the direction from which the menu will be opened. Use tl for top-left, br for bottom-right, etc. When the left/right position depends on the text directionality, use ts for top-start, te for top-end, etc. Start will map to left in left-to-right text directionality, and to to right in right-to-left text directionality. End maps the other way around. The default value is 'ts'.
@Input()
hoisted
boolean

Set to a value other then false to hoist the menu surface to the body so that the position offsets are calculated relative to the page and not the anchor. (When a viewport is set, hoisting is done to the viewport instead of the body).
@Input()
fixed
boolean

Set to a value other then false use fixed positioning, so that the menu stays in the same place on the window (or viewport) even if the page (or viewport) is scrolled.

Directive: MdcMenuAnchorDirective

Selector: [mdcMenuAnchor]

Defines an anchor to position an mdcMenuSurface to. If this directive is used as the direct parent of an mdcMenuSurface, it will automatically be used as the anchor point. (Unless de mdcMenuSurface sets another anchor via its menuAnchorproperty).