Comment personnaliser la barre de titre de fenêtre d'un Électron de l'app?

Je suis arriver a commencé à travailler avec Electron pour construire une application de bureau. Comment puis-je personnaliser la barre de titre de fenêtre (qui contient la fermer, réduire, et plein de boutons à l'écran) pour ajouter des vues personnalisées? Safari est un exemple que je pense:

Comment personnaliser la barre de titre de fenêtre d'un Électron de l'app?

InformationsquelleAutor Andrew | 2016-02-26
  1. 19

    Votre seule option dans l'électronique serait de créer un sans cadre (aka sans frontières) de la fenêtre, puis de créer un "faux" de la barre de titre avec le CSS, y compris tous les éléments d'INTERFACE utilisateur que vous avez besoin.

    Électron/webkit fournit des propriétés CSS qui permet de rendre n'importe quel élément déplaçable, comme une barre de titre:

    .titlebar {
  -webkit-user-select: none;
  -webkit-app-region: drag;
}
    InformationsquelleAutor Teak
  2. 17

    La première, et de la croix-plate-forme de l'option est de créer un sans fenêtre. La deuxième est macOS uniquement, et permet de masquer la barre de titre, mais de conserver les contrôles de la fenêtre, ce qui permet d'ajouter des 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()

    Alors vous pouvez utiliser les propriétés css -webkit-user-select et -webkit-app-region pour spécifier le faire glisser de la zone.

    InformationsquelleAutor 16patsle