Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/component/menu
Menu component
https://github.com/component/menu
Last synced: 12 days ago
JSON representation
Menu component
- Host: GitHub
- URL: https://github.com/component/menu
- Owner: component
- Created: 2012-07-31T23:12:57.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2015-11-25T18:33:49.000Z (about 9 years ago)
- Last Synced: 2024-12-06T01:34:16.512Z (22 days ago)
- Language: JavaScript
- Size: 338 KB
- Stars: 22
- Watchers: 3
- Forks: 17
- Open Issues: 3
-
Metadata Files:
- Readme: Readme.md
- Changelog: History.md
Awesome Lists containing this project
README
# Menu
Menu component with structural styling to give you a clean slate.
## 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
- `clear` when the menu has been cleared
- `select` (item) when an item is selected
- `*` menu item events are emitted when clicked
## Example
```js
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`:
```js
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:
```js
menu.add('Hello');
menu.on('Hello', function(){
console.log('clicked hello');
});
```
Using callbacks:
```js
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.
```js
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`:
```js
menu.add('Add item');
menu.remove('Add item');
```
Or with custom slugs:
```js
menu.add('add-item', 'Add item');
menu.remove('add-item');
```
### Menu#clear()
Clears the menu.
```js
menu.clear();
```
### Menu#has(slug)
Check if a menu item is present.
```js
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