В этом руководстве предполагается, что вы знаете, как установить и настроить проект electron-quick-start. Вы можете найти учебник здесь.
В приложениях Electron есть два типа меню: первое — это меню приложения, а второе — контекстное меню (меню, вызываемое правой кнопкой мыши). Мы рассмотрим создание меню приложения.
Во-первых, нам нужно определить шаблон с ярлыками, подменю и типами пунктов меню.
Мы определим новый постоянный шаблон, который представляет собой массив объектов. Каждый объект будет иметь метку, которая будет отображаться в меню. В первом меню View будет подменю с тремя пунктами. Первая — это роль «перезагрузки», в которой мы определяем сочетание клавиш со свойством ускоритель. CmdOrCtrl+Y означает Cmd + Y в MacOS и Ctrl + Y в Windows.
Мы разделим два пункта подменю с помощью разделителя, мы просто объявим новый объект со свойством типа «разделитель». И третий пункт подменю имеет роль «togglefullscreen».
const template = [ { label: 'View', submenu: [ { role: 'reload', accelerator: 'CmdOrCtrl+Y' }, { type: 'separator' }, { role: 'togglefullscreen' }, ] }, { label: 'Help', submenu: [ { label: 'Learn More', click() { electron.shell.openExternal('https://electron.atom.io') } } ] } ]
Второй пункт меню будет иметь метку (имя меню) Help. Здесь мы также определяем массив подменю с одним объектом. Этот объект имеет метку «Подробнее», и теперь мы сделаем что-то другое. Когда мы нажимаем «Узнать больше», мы запускаем функцию click(), которая открывает веб-сайт Electron в новом окне браузера.
Создав шаблон, мы можем его настроить. Во-первых, нам нужно определить новое const Menu и назначить ему electron.Menu.
const Menu = electron.Menu
Теперь давайте покажем наше меню, определив новое постоянное меню в методе createWindow и вызвав метод Menu.buildFromTemplate, куда мы включим наш определенный шаблон. Теперь мы можем вызвать метод setApplicationMenu и передать созданную константу меню.
const menu = Menu.buildFromTemplate(template) Menu.setApplicationMenu(menu)
Вы можете попробовать свое приложение, перейдя в консоль, перейдя в каталог electronic-quick-start и выполнив: electron .