Bir Electron uygulamasının pencere başlık çubuğu nasıl özelleştirilir?

Question

Masaüstü uygulaması oluşturmak için Electron ile çalışmaya başladım. Özel görünümler eklemek için pencere başlık çubuğunu (kapatma, simge durumuna küçült ve tam ekran düğmelerini içeren) nasıl özelleştirebilirim?

Answer 1

Electron tek seçeneğiniz, kenarlıksız pencere oluşturmak ve sonra da gereken herhangi bir UI öğeleri içeren CSS ile bir "sahte" başlık çubuğunu oluşturmak olacaktır: Safari söylüyorum ben bir örnektir .

Elektron/webkit bir başlık çubuğuna gibi, herhangi bir eleman sürüklenebilir yapmanızı sağlar CSS özellikleri sunar:

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

Answer 2

ilk ve çapraz platform seçeneği frameless window yaratmaktır. İkincisi sadece macOS'tur ve başlık çubuğunu gizlemenize izin verir, ancak pencere düğmelerini koruyarak özel düğmelerin eklenmesini sağlar. Örnek:

const { BrowserWindow } = require('electron') 

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

Sonra sürükle bölgesini belirtmek için css özelliklerini -webkit-user-select ve -webkit-app-region kullanabilirsiniz.