Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Menu component

tag: 0.1.0

Fetching latest commit…

Cannot retrieve the latest commit at this time

Readme.md

Menu

Menu component with structural styling to give you a clean slate.

js menu component

Installation

$ npm install menu-component

Features

  • events for composition
  • structural CSS letting you decide on style
  • fluent API
  • arrow key navigation

Events

  • show when shown
  • hide when hidden
  • remove (item) when an item is removed
  • select (item) when an item is selected
  • * menu item events are emitted when clicked

Example

var Menu = require('menu');

var menu = new Menu;

menu
.add('Add item')
.add('Edit item', function(){ console.log('edit'); })
.add('Remove item', function(){ console.log('remove'); })
.add('Remove "Add item"', function(){
  menu.remove('Add item');
  menu.remove('Remove "Add item"');
});

menu.on('select', function(item){
  console.log('selected "%s"', item);
});

menu.on('Add item', function(){
  console.log('added an item');
});

oncontextmenu = function(e){
  e.preventDefault();
  menu.moveTo(e.pageX, e.pageY);
  menu.show();
};

API

Menu()

Create a new Menu:

var Menu = require('menu');
var menu = new Menu();
var menu = Menu();

Menu#add([slug], text, [fn])

Add a new menu item with the given text, optional slug and callback fn.

Using events to handle selection:

menu.add('Hello');

menu.on('Hello', function(){
  console.log('clicked hello');
});

Using callbacks:

menu.add('Hello', function(){
  console.log('clicked hello');
});

Using a custom slug, otherwise "hello" is generated from the text given, which may conflict with "rich" styling like icons within menu items, or i18n.

menu.add('add-item', 'Add Item');

menu.on('add-item', function(){
  console.log('clicked "Add Item"');
});

menu.add('add-item', 'Add Item', function(){
  console.log('clicked "Add Item"');
});

Menu#remove(slug)

Remove an item by the given slug:

menu.add('Add item');
menu.remove('Add item');

Or with custom slugs:

menu.add('add-item', 'Add item');
menu.remove('add-item');

Menu#has(slug)

Check if a menu item is present.

menu.add('Add item');

menu.has('Add item');
// => true

menu.has('add-item');
// => true

menu.has('Foo');
// => false

Menu#moveTo(x, y)

Move the menu to (x, y).

Menu#show()

Show the menu.

Menu#hide()

Hide the menu.

License

MIT

Something went wrong with that request. Please try again.