Edits and standardization

This commit is contained in:
Jessica Lord 2015-08-28 16:19:28 -07:00
parent 195be931a4
commit 33a19f9071
2 changed files with 60 additions and 44 deletions

View file

@ -1,7 +1,14 @@
# menu-item # menuItem
The `menu-item` module allows you to add items to an application or content
[`menu`](menu.md).
See [`menu`](menu.md) for examples.
## Class: MenuItem ## Class: MenuItem
Create a new `MenuItem` with the following method:
### new MenuItem(options) ### new MenuItem(options)
* `options` Object * `options` Object

View file

@ -1,12 +1,17 @@
# menu # menu
The `Menu` class is used to create native menus that can be used as The `menu` class is used to create native menus that can be used as
application menus and context menus. Each menu consists of multiple menu application menus and
items, and each menu item can have a submenu. [context menus](https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/PopupGuide/ContextMenus).
This module is a main process module which can be used in a render process via
the `remote` module.
Below is an example of creating a menu dynamically in a web page by using Each menu consists of multiple [menu items](menu-item.md) and each menu item can
the [remote](remote.md) module, and showing it when the user right clicks have a submenu.
the page:
Below is an example of creating a menu dynamically in a web page
(render process) by using the [remote](remote.md) module, and showing it when
the user right clicks the page:
```html ```html
<!-- index.html --> <!-- index.html -->
@ -27,9 +32,11 @@ window.addEventListener('contextmenu', function (e) {
</script> </script>
``` ```
Another example of creating the application menu with the simple template API: An example of creating the application menu in the render process with the
simple template API:
**Note to Window and Linux users** the `selector` member of each menu item is a Mac-only [Accelerator option](https://github.com/atom/electron/blob/master/docs/api/accelerator.md). **Note to Window and Linux users** the `selector` member of each menu item is a
Mac-only [Accelerator option](https://github.com/atom/electron/blob/master/docs/api/accelerator.md).
```html ```html
<!-- index.html --> <!-- index.html -->
@ -167,102 +174,104 @@ Menu.setApplicationMenu(menu);
## Class: Menu ## Class: Menu
### new Menu() ### `new Menu()`
Creates a new menu. Creates a new menu.
### Class Method: Menu.setApplicationMenu(menu) ## Methods
The `menu` class has the following methods:
### `Menu.setApplicationMenu(menu)`
* `menu` Menu * `menu` Menu
Sets `menu` as the application menu on OS X. On Windows and Linux, the `menu` Sets `menu` as the application menu on OS X. On Windows and Linux, the `menu`
will be set as each window's top menu. will be set as each window's top menu.
### Class Method: Menu.sendActionToFirstResponder(action) ### `Menu.sendActionToFirstResponder(action)` _OS X_
* `action` String * `action` String
Sends the `action` to the first responder of application, this is used for Sends the `action` to the first responder of application. This is used for
emulating default Cocoa menu behaviors, usually you would just use the emulating default Cocoa menu behaviors, usually you would just use the
`selector` property of `MenuItem`. `selector` property of `MenuItem`.
**Note:** This method is OS X only. ### `Menu.buildFromTemplate(template)`
### Class Method: Menu.buildFromTemplate(template)
* `template` Array * `template` Array
Generally, the `template` is just an array of `options` for constructing Generally, the `template` is just an array of `options` for constructing a
[MenuItem](menu-item.md), the usage can be referenced above. [MenuItem](menu-item.md). The usage can be referenced above.
You can also attach other fields to element of the `template`, and they will You can also attach other fields to the element of the `template` and they
become properties of the constructed menu items. will become properties of the constructed menu items.
### Menu.popup(browserWindow, [x, y]) ### `Menu.popup(browserWindow[, x, y])`
* `browserWindow` BrowserWindow * `browserWindow` BrowserWindow
* `x` Number * `x` Number (optional)
* `y` Number * `y` Number (optional)
Popups this menu as a context menu in the `browserWindow`. You can optionally Pops up this menu as a context menu in the `browserWindow`. You
provide a `(x,y)` coordinate to place the menu at, otherwise it will be placed can optionally provide a `x,y` coordinate to place the menu at, otherwise it
at the current mouse cursor position. will be placed at the current mouse cursor position.
### Menu.append(menuItem) ### `Menu.append(menuItem)`
* `menuItem` MenuItem * `menuItem` MenuItem
Appends the `menuItem` to the menu. Appends the `menuItem` to the menu.
### Menu.insert(pos, menuItem) ### `Menu.insert(pos, menuItem)`
* `pos` Integer * `pos` Integer
* `menuItem` MenuItem * `menuItem` MenuItem
Inserts the `menuItem` to the `pos` position of the menu. Inserts the `menuItem` to the `pos` position of the menu.
### Menu.items ### `Menu.items()`
Get the array containing the menu's items. Get an array containing the menu's items.
## Notes on OS X application menu ## Notes on OS X Application Menu
OS X has a completely different style of application menu from Windows and OS X has a completely different style of application menu from Windows and
Linux, and here are some notes on making your app's menu more native-like. Linux, here are some notes on making your app's menu more native-like.
### Standard menus ### Standard Menus
On OS X there are many system defined standard menus, like the `Services` and On OS X there are many system defined standard menus, like the `Services` and
`Windows` menus. To make your menu a standard menu, you can just set your menu's `Windows` menus. To make your menu a standard menu, you can just set your menu's
label to one of followings, and Electron will recognize them and make them label to one of following and Electron will recognize them and make them
become standard menus: become standard menus:
* `Window` * `Window`
* `Help` * `Help`
* `Services` * `Services`
### Standard menu item actions ### Standard Menu Item Actions
OS X has provided standard actions for some menu items (which are called OS X has provided standard actions for some menu items (which are called
`selector`s), like `About xxx`, `Hide xxx`, and `Hide Others`. To set the action `selector`s), like `About xxx`, `Hide xxx`, and `Hide Others`. To set the action
of a menu item to a standard action, you can set the `selector` attribute of the of a menu item to a standard action, you can set the `selector` attribute of the
menu item. menu item.
### Main menu's name ### Main Menu's Name
On OS X the label of application menu's first item is always your app's name, On OS X the label of application menu's first item is always your app's name,
no matter what label you set. To change it you have to change your app's name no matter what label you set. To change it you have to change your app's name
by modifying your app bundle's `Info.plist` file. See by modifying your app bundle's `Info.plist` file. See
[About Information Property List Files](https://developer.apple.com/library/ios/documentation/general/Reference/InfoPlistKeyReference/Articles/AboutInformationPropertyListFiles.html) [About Information Property List Files](https://developer.apple.com/library/ios/documentation/general/Reference/InfoPlistKeyReference/Articles/AboutInformationPropertyListFiles.html)
for more. for more information.
## Menu item position ## Menu Item Position
You can make use of `position` and `id` to control how the item would be placed You can make use of `position` and `id` to control how the item will be placed
when building a menu with `Menu.buildFromTemplate`. when building a menu with `Menu.buildFromTemplate`.
The `position` attribute of `MenuItem` has the form `[placement]=[id]` where The `position` attribute of `MenuItem` has the form `[placement]=[id]`, where
placement is one of `before`, `after`, or `endof` and `id` is the unique ID of placement is one of `before`, `after`, or `endof` and `id` is the unique ID of
an existing item in the menu: an existing item in the menu:
@ -272,12 +281,12 @@ an existing item in the menu:
* `after` - Inserts this item after id referenced item. If the referenced * `after` - Inserts this item after id referenced item. If the referenced
item doesn't exist the item will be inserted at the end of the menu. item doesn't exist the item will be inserted at the end of the menu.
* `endof` - Inserts this item at the end of the logical group containing * `endof` - Inserts this item at the end of the logical group containing
the id referenced item. (Groups are created by separator items). If the id referenced item (groups are created by separator items). If
the referenced item doesn't exist a new separator group is created with the referenced item doesn't exist, a new separator group is created with
the given id and this item is inserted after that separator. the given id and this item is inserted after that separator.
When an item is positioned following unpositioned items are inserted after When an item is positioned, all un-positioned items are inserted after
it, until a new item is positioned. So if you want to position a group of it until a new item is positioned. So if you want to position a group of
menu items in the same location you only need to specify a position for menu items in the same location you only need to specify a position for
the first item. the first item.