Jak dostosować pasek tytułu okna aplikacji Electron?

Question

Rozpoczęcie pracy z Electron w celu zbudowania aplikacji komputerowej. Jak mogę dostosować pasek tytułu okna (który zawiera przyciski zamknięcia, minimalizacji i pełnego ekranu), aby dodać niestandardowe widoki? Safari jest przykładem, że mam na myśli:

Answer 1

Jedyną opcją w Electron byłoby stworzenie obramowania okna, a następnie utworzyć „fake” pasek tytułowy z CSS, w tym wszelkich elementów UI trzeba .

Electron/WebKit zapewnia właściwości CSS, który pozwala na wykonywanie dowolny element przyciągany, jak tytule:

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

Answer 2

Opcja pierwsza, a cross-platform jest stworzenie frameless window. Drugi to tylko system MacOS i pozwala ukryć pasek tytułu, ale zachowuje elementy sterujące okna, pozwalając na dodanie niestandardowych przycisków. Przykład:

const { BrowserWindow } = require('electron') 

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

Następnie można użyć właściwości css -webkit-user-select i -webkit-app-region określić strefę oporu.