ember-cli-mdc-menu-surface

ember-cli addon for @material/menu-surface.

Usage no npm install needed!

<script type="module">
  import emberCliMdcMenuSurface from 'https://cdn.skypack.dev/ember-cli-mdc-menu-surface';
</script>

README

ember-cli-mdc-menu-surface

ember-cli addon for @material/menu-surface.

Installation

ember install ember-cli-mdc-menu-surface

Components and Mixins

Components

Modifiers

MdcMenuSurface

Description

Add a menu surface component to the page.

Usage

<MdcMenuSurface @open=[true|false]
                @quickOpen=[true|false]
                @anchor=[HTMLElement|string]
                @anchorMargin=[number]
                @anchorCorner=[string] 
                @position=["fixed"|"absolute"]
                @left=number
                @top=number />

Attributes

  • open - Trigger the surface to open
  • quickOpen - Enable quick open
  • anchor - Optional anchor point for the menu surface
  • anchorMargin - Margin between the menu surface and anchor
  • anchorCorner - Corner of achor element to affix menu surface
  • position - Either "fixed" or "absolute"
  • left - Left position of the menu (works only in absolute mode)
  • top - Top position of the menu (works only in absolute mode)

mdc-menu-surface-anchor

Description

The {{mdc-menu-surface-anchor}} modifier defines the anchor element for a menu.

Usage

<div class="toolbar" {{mdc-menu-surface-anchor}}>
  <button {{on "click" this.toggleMenu}}>Open Menu</button>
 
  <MdcMenuSurface @open={{this.openMenu}}>
    <!-- -->
  </MdcMenuSurface>
</div>