web-dev-qa-db-fra.com

Comment personnaliser la barre de titre de la fenêtre d'une application Electron?

Je commence à travailler avec Electron pour créer une application de bureau. Comment puis-je personnaliser la barre de titre de la fenêtre (qui contient les boutons Fermer, Réduire et Plein écran) pour ajouter des vues personnalisées? Safari est un exemple auquel je pense:

safar title bar

macoselectron
15
Andrew

Votre seule option dans Electron serait de créer une fenêtre sans cadre (aka sans bordure), puis de créer une "fausse" barre de titre avec CSS, y compris tous les éléments d'interface utilisateur dont vous avez besoin.

Electron/webkit fournit des propriétés CSS qui vous permettent de faire glisser n'importe quel élément, comme une barre de titre:

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

La première option, multiplateforme, consiste à créer un fenêtre sans cadre . Le second est uniquement macOS, et vous permet de masquer la barre de titre, mais de conserver les commandes de la fenêtre, permettant l'ajout de boutons personnalisés. Exemple:

const { BrowserWindow } = require('electron')

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

Ensuite, vous pouvez utiliser les propriétés css -webkit-user-select et -webkit-app-region pour spécifier la zone de glissement.

16
16patsle