mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

docs: revised the macos dock menu feature page (#25985)

Browse source 
* docs: revised the macos dock menu feature page

* docs: added a cross-link to api, fixed mentions in the macos feature page
This commit is contained in:
Antonio 2020-10-20 04:32:40 +03:00 committed by GitHub
parent ae5de3d9c5
commit 89c04b3c6c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
docs/images/macos-dock-menu.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 100 KiB

29
docs/tutorial/macos-dock.md
View file

@ -1,10 +1,11 @@
# macOS Dock
## Overview
Electron has APIs to configure the app's icon in the macOS Dock. A macOS-only
API exists to create a custom dock menu, but
Electron also uses the app's dock icon to implement cross-platform features
like [recent documents][recent-documents] and
[application progress][progress-bar].
API exists to create a custom dock menu, but Electron also uses the app dock
icon as the entry point for cross-platform features like
[recent documents][recent-documents] and [application progress][progress-bar].
The custom dock is commonly used to add shortcuts to tasks the user wouldn't
want to open the whole app window for.
@ -13,8 +14,15 @@ __Dock menu of Terminal.app:__
![Dock Menu][dock-menu-image]
To set your custom dock menu, you can use the `app.dock.setMenu` API, which is
only available on macOS:
To set your custom dock menu, you need to use the
[`app.dock.setMenu`](../api/dock.md#docksetmenumenu-macos) API,
which is only available on macOS.
## Example
Starting with a working application from the
[Quick Start Guide](quick-start.md), update the `main.js` file with the
following lines:
```javascript
const { app, Menu } = require('electron')
@ -33,9 +41,16 @@ const dockMenu = Menu.buildFromTemplate([
{ label: 'New Command...' }
])
app.dock.setMenu(dockMenu)
app.whenReady().then(() => {
app.dock.setMenu(dockMenu)
})
```
After launching the Electron application, right click the application icon.
You should see the custom menu you just defined:
![macOS dock menu](../images/macos-dock-menu.png)
[dock-menu-image]: https://cloud.githubusercontent.com/assets/639601/5069962/6032658a-6e9c-11e4-9953-aa84006bdfff.png
[recent-documents]: ./recent-documents.md
[progress-bar]: ./progress-bar.md