Menu
類別：Menu
建立原生應用程式選單和上下文選單。
程序：主程序
new Menu()
建立新的選單。
靜態方法
Menu 類別具有以下靜態方法
Menu.setApplicationMenu(menu)
menuMenu | null
在 macOS 上將 menu 設定為應用程式選單。在 Windows 和 Linux 上，menu 將被設定為每個視窗的頂部選單。
同樣在 Windows 和 Linux 上，您可以在頂層項目名稱中使用 & 來指示哪個字母應該獲得產生的快速鍵。例如，為檔案選單使用 &File 將會產生一個 Alt-F 快速鍵，用於打開相關選單。按鈕標籤中指示的字元然後會帶有底線，而 & 字元不會顯示在按鈕標籤上。
為了跳脫項目名稱中的 & 字元，請加入一個前導 &。例如，&&File 將導致 &File 顯示在按鈕標籤上。
傳遞 null 將會抑制預設選單。在 Windows 和 Linux 上，這還具有從視窗中移除選單列的額外效果。
注意： 如果應用程式未設定選單，則將自動建立預設選單。它包含標準項目，例如 File、Edit、View、Window 和 Help。
Menu.getApplicationMenu()
返回 Menu | null - 應用程式選單，如果已設定，否則返回 null。
注意： 返回的 Menu 實例不支援動態新增或移除選單項目。 實例屬性 仍然可以動態修改。
Menu.sendActionToFirstResponder(action) macOS
action字串
將 action 發送到應用程式的第一響應者。這用於模擬預設的 macOS 選單行為。通常您會使用 role 的 MenuItem 屬性。
請參閱 macOS Cocoa 事件處理指南，以取得關於 macOS 原生動作的更多資訊。
Menu.buildFromTemplate(template)
template(MenuItemConstructorOptions | MenuItem)[]
返回 Menu
一般來說，template 是用於建構 MenuItem 的 options 陣列。用法可以參考上面。
您也可以將其他欄位附加到 template 的元素，它們將成為建構的選單項目的屬性。
實例方法
menu 物件具有以下實例方法
menu.popup([options])
在此 BaseWindow 中彈出此選單作為上下文選單。
menu.closePopup([window])
windowBaseWindow (可選) - 預設為焦點視窗。
關閉 window 中的上下文選單。
menu.append(menuItem)
menuItemMenuItem
將 menuItem 附加到選單。
menu.getMenuItemById(id)
id字串
返回 MenuItem | null 具有指定 id 的項目
menu.insert(pos, menuItem)
pos整數menuItemMenuItem
將 menuItem 插入到選單的 pos 位置。
實例事件
使用 new Menu 建立或由 Menu.buildFromTemplate 返回的物件會發出以下事件
注意： 某些事件僅在特定作業系統上可用，並標記為如此。
事件：'menu-will-show'
返回
event事件
當呼叫 menu.popup() 時發出。
事件：'menu-will-close'
返回
event事件
當彈出視窗被手動關閉或使用 menu.closePopup() 關閉時發出。
實例屬性
menu 物件也具有以下屬性
menu.items
一個包含選單項目的 MenuItem[] 陣列。
每個 Menu 由多個 MenuItem 組成，並且每個 MenuItem 可以有一個子選單。
範例
使用簡單範本 API 建立應用程式選單的範例
const { app, Menu } = require('electron')
const isMac = process.platform === 'darwin'
const template = [
// { role: 'appMenu' }
...(isMac
? [{
label: app.name,
submenu: [
{ role: 'about' },
{ type: 'separator' },
{ role: 'services' },
{ type: 'separator' },
{ role: 'hide' },
{ role: 'hideOthers' },
{ role: 'unhide' },
{ type: 'separator' },
{ role: 'quit' }
]
}]
: []),
// { role: 'fileMenu' }
{
label: 'File',
submenu: [
isMac ? { role: 'close' } : { role: 'quit' }
]
},
// { role: 'editMenu' }
{
label: 'Edit',
submenu: [
{ role: 'undo' },
{ role: 'redo' },
{ type: 'separator' },
{ role: 'cut' },
{ role: 'copy' },
{ role: 'paste' },
...(isMac
? [
{ role: 'pasteAndMatchStyle' },
{ role: 'delete' },
{ role: 'selectAll' },
{ type: 'separator' },
{
label: 'Speech',
submenu: [
{ role: 'startSpeaking' },
{ role: 'stopSpeaking' }
]
}
]
: [
{ role: 'delete' },
{ type: 'separator' },
{ role: 'selectAll' }
])
]
},
// { role: 'viewMenu' }
{
label: 'View',
submenu: [
{ role: 'reload' },
{ role: 'forceReload' },
{ role: 'toggleDevTools' },
{ type: 'separator' },
{ role: 'resetZoom' },
{ role: 'zoomIn' },
{ role: 'zoomOut' },
{ type: 'separator' },
{ role: 'togglefullscreen' }
]
},
// { role: 'windowMenu' }
{
label: 'Window',
submenu: [
{ role: 'minimize' },
{ role: 'zoom' },
...(isMac
? [
{ type: 'separator' },
{ role: 'front' },
{ type: 'separator' },
{ role: 'window' }
]
: [
{ role: 'close' }
])
]
},
{
role: 'help',
submenu: [
{
label: 'Learn More',
click: async () => {
const { shell } = require('electron')
await shell.openExternal('https://electron.dev.org.tw')
}
}
]
}
]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
渲染程序
若要建立由渲染程序啟動的選單，請使用 IPC 將所需資訊發送到主程序，並讓主程序代表渲染程序顯示選單。
以下是在使用者右鍵點擊頁面時顯示選單的範例
// renderer
window.addEventListener('contextmenu', (e) => {
e.preventDefault()
ipcRenderer.send('show-context-menu')
})
ipcRenderer.on('context-menu-command', (e, command) => {
// ...
})
// main
ipcMain.on('show-context-menu', (event) => {
const template = [
{
label: 'Menu Item 1',
click: () => { event.sender.send('context-menu-command', 'menu-item-1') }
},
{ type: 'separator' },
{ label: 'Menu Item 2', type: 'checkbox', checked: true }
]
const menu = Menu.buildFromTemplate(template)
menu.popup({ window: BrowserWindow.fromWebContents(event.sender) })
})
關於 macOS 應用程式選單的注意事項
macOS 的應用程式選單風格與 Windows 和 Linux 完全不同。以下是一些關於使您的應用程式選單更像原生的注意事項。
標準選單
在 macOS 上，有許多系統定義的標準選單，例如 Services 和 Windows 選單。為了使您的選單成為標準選單，您應該將選單的 role 設定為以下其中之一，Electron 將會識別它們並使其成為標準選單
windowhelpservices
標準選單項目動作
macOS 為某些選單項目提供了標準動作，例如 About xxx、Hide xxx 和 Hide Others。若要將選單項目的動作設定為標準動作，您應該設定選單項目的 role 屬性。
主選單的名稱
在 macOS 上，應用程式選單的第一個項目的標籤始終是您的應用程式名稱，無論您設定什麼標籤。若要變更它，請修改您的應用程式套件的 Info.plist 檔案。請參閱 關於資訊屬性列表檔案 以取得更多資訊。
為特定瀏覽器視窗設定選單 (Linux Windows)
瀏覽器視窗的 setMenu 方法 可以設定特定瀏覽器視窗的選單。
選單項目位置
您可以利用 before、after、beforeGroupContaining、afterGroupContaining 和 id 來控制在使用 Menu.buildFromTemplate 建構選單時項目的放置方式。
before- 將此項目插入到具有指定 id 的項目之前。如果參考的項目不存在，則會將項目插入到選單的末尾。也暗示問題中的選單項目應放置在與該項目相同的「群組」中。after- 將此項目插入到具有指定 id 的項目之後。如果參考的項目不存在，則會將項目插入到選單的末尾。也暗示問題中的選單項目應放置在與該項目相同的「群組」中。beforeGroupContaining- 提供一種方法，讓單個上下文選單宣告其包含群組在具有指定 id 的項目的包含群組之前的位置。afterGroupContaining- 提供一種方法，讓單個上下文選單宣告其包含群組在具有指定 id 的項目的包含群組之後的位置。
預設情況下，除非使用指定的定位關鍵字之一，否則項目將按照它們在範本中存在的順序插入。
範例
範本
[
{ id: '1', label: 'one' },
{ id: '2', label: 'two' },
{ id: '3', label: 'three' },
{ id: '4', label: 'four' }
]
Menu
- 1
- 2
- 3
- 4
範本
[
{ id: '1', label: 'one' },
{ type: 'separator' },
{ id: '3', label: 'three', beforeGroupContaining: ['1'] },
{ id: '4', label: 'four', afterGroupContaining: ['2'] },
{ type: 'separator' },
{ id: '2', label: 'two' }
]
Menu
- 3
- 4
- ---
- 1
- ---
- 2
範本
[
{ id: '1', label: 'one', after: ['3'] },
{ id: '2', label: 'two', before: ['1'] },
{ id: '3', label: 'three' }
]
Menu
- ---
- 3
- 2
- 1