menu-component

0.1.1 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i menu-component

Weekly Downloads

9

Version

0.1.1

License

none

Last publish

Collaborators

  • defunctzombie
  • tjholowaychuk
  • jongleberry
  • dominicbarnes
  • tootallnate
  • rauchg
  • retrofox
  • coreh
  • forbeslindesay
  • kelonye
  • mattmueller
  • yields
  • anthonyshort
  • ianstormtaylor
  • cristiandouce
  • swatinem
  • stagas
  • amasad
  • juliangruber
  • calvinfo
  • blakeembrey
  • timoxley
  • jonathanong
  • queckezz
  • nami-doc
  • clintwood
  • thehydroimpulse
  • stephenmathieson
  • trevorgerhardt