Как настроить панель заголовков окна приложения Electron?

Я начал работать с Electron, чтобы создать настольное приложение. Как настроить панель заголовка окна (которая содержит кнопки закрытия, минимизации и полноэкранного режима) для добавления пользовательских представлений? Сафари - пример, о котором я думаю:

Ответ 1

Единственный вариант в Electron - создать окно без полей, а затем создать "поддельную" строку заголовка с CSS, включая любые элементы пользовательского интерфейса, которые вам нужны.

Электрон/webkit предоставляет свойства CSS, которые позволяют сделать любой элемент перетаскиваемым, например, заголовком:

.titlebar {
  -webkit-user-select: none;
  -webkit-app-region: drag;
}

Ответ 2

Первая и кросс-платформенная опция заключается в создании бескаркасного окна. Второй вариант - только macOS, и вы можете скрыть строку заголовка, но сохраните элементы управления окнами, позволяя добавлять пользовательские кнопки. Пример:

const { BrowserWindow } = require('electron')

// This will create a window without titlebar, allowing for customization
let win = new BrowserWindow({ titleBarStyle: 'hidden' })
win.show()

Затем вы можете использовать свойства css -webkit-user-select и -webkit-app-region, чтобы указать зону перетаскивания.