В этом руководстве предполагается, что вы знаете, как установить и настроить проект 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 .