Styles de fenêtre personnalisés
Fenêtre sans cadre
Une fenêtre sans cadre supprime tous les chrome appliqués par l'OS, y compris les contrôles de fenêtres.
Pour créer une fenêtre sans cadre, définissez le paramètre BaseWindowContructorOptions frame dans le constructeur de BrowserWindow à false.
- main.js
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 300,
height: 200,
frame: false
})
win.loadURL('https://example.com')
}
app.whenReady().then(() => {
createWindow()
})
Sur Wayland (Linux), les fenêtres sans cadre ont des ombres de drop GTK et des limites de redimension étendues
par défaut. Pour créer une fenêtre sans cadre avec aucune décoration
, définissez hasShadow: false dans les options du constructeur de fenêtre.
Fenêtres transparentes
To create a fully transparent window, set the BaseWindowContructorOptions transparent param in the BrowserWindow constructor to true.
The following fiddle takes advantage of a transparent window and CSS styling to create the illusion of a circular window.
- main.js
- index.html
- styles.css
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 100,
height: 100,
resizable: false,
frame: false,
transparent: true
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
<link href="./styles.css" rel="stylesheet">
<title>Transparent Hello World</title>
</head>
<body>
<div class="white-circle">
<div>Hello World!</div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
background-color: rgba(0, 0, 0, 0); /* Transparent background */
}
.white-circle {
width: 100px;
height: 100px;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
app-region: drag;
user-select: none;
}
Limitations
- Vous ne pouvez pas cliquer dans la zone transparente. Voir #1335 pour plus de détails.
- Les fenêtres transparentes ne sont pas redimensionnables. Définir
resizableàtruepeut empêcher une fenêtre transparente de fonctionner sur certaines plates-formes. - Le filtre CSS
blur()ne s’applique qu’au contenu Web de la fenêtre, il n’y a donc aucun moyen d’appliquer un effet de flou au contenu sous la fenêtre (c’est-à-dire sur d’autres applications ouvertes sur le système de l’utilisateur). - La fenêtre ne sera pas transparente lorsque les DevTools sont ouverts.
- Sur Windows _:
- Les fenêtres transparentes ne peuvent pas être maximalisées à l’aide du menu système Windows ou par un double click sur la barre de titre. Le raisonnement sous-jacent à cela peut être vu sur PR #28207.
- Sur macOS _:
- L'ombre native de la fenêtre ne sera pas affichée sur une fenêtre transparente.