brick-action-menu

An action menu for Brick.

Demo

Check it live!

Usage

1. Import Web Components polyfill:

   <script src="https://github.com/mozbrick/brick-action-menu/raw/master/bower_components/platform/platform.js"></script>

2. Import Custom Element:

   <link rel="import" href="https://github.com/mozbrick/brick-action-menu/blob/master/src/brick-action-menu.html">

3. Start using it:

   <brick-action-menu id="menu-ex1">
     <menu>
       <button>Action 1</button>
       <button id="action2">Action 2</button>
       <button>Action 3</button>
     </menu>
   </brick-action-menu>

   // Click events on menu buttons work like usual
   var action2 = document.getElementById('action2');
   action2.addEventListener('click', function (ev) {
     var button = ev.target;
     // Handle clicked menu item button here.
   });
   
   var menu = document.getElementById('menu-ex1');
   
   // Optional event handler
   menu.addEventListener('pick', function (ev) {
     var button = ev.target;
     // Handle clicked menu item button here.
   });
   
   // Optional callback on show()
   menu.show(function (button) {
     // Handle clicked menu item button here.
   });

Options

None.

Methods

Events

Development

Brick components use Stylus to generate their CSS.

This repository comes outfitted with a set of tools to ease the development process.

To get started:

• Install Bower & Gulp:

  $ npm install -g bower gulp

• Install local dependencies:

  $ npm install && bower install

While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code.

To run the development server:

• Run gulp server
• Navigate to http://localhost:3001

To simply build and lint your code, run gulp build.

You can also push your code to GitHub Pages by running gulp deploy.