Я начал работать с Electron, чтобы создать настольное приложение. Как настроить панель заголовка окна (которая содержит кнопки закрытия, минимизации и полноэкранного режима) для добавления пользовательских представлений? Сафари - пример, о котором я думаю:
Единственный вариант в Electron - создать окно без полей, а затем создать "поддельную" строку заголовка с CSS, включая любые элементы пользовательского интерфейса, которые вам нужны.
Электрон/webkit предоставляет свойства CSS, которые позволяют сделать любой элемент перетаскиваемым, например, заголовком:
.titlebar {
-webkit-user-select: none;
-webkit-app-region: drag;
}
Первая и кросс-платформенная опция заключается в создании бескаркасного окна. Второй вариант - только 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, чтобы указать зону перетаскивания.