Estoy tratando de usar la opción titleBarOverlay en electron.js pero cuando trato de arrastrar la ventana, no se arrastra. Cuando elimino la opción, la función de arrastrar funciona normalmente. ¿Hay una solución para esto?
índice.js:
const { app, BrowserWindow } = require('electron'); let mainWindow; app.on('ready', () => { mainWindow = new BrowserWindow({ height: 600, width: 800, title: "Last Horizon", titleBarStyle: 'hidden', titleBarOverlay: { color: '#2e2e2e', symbolColor: '#ff6d4b' }, webPreferences: { nodeIntegration: true } }); mainWindow.removeMenu() mainWindow.loadFile('src/index.html'); });índice.html:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="styles.css"/> </head> <body> <div class="titleBar"></div> <div class="main"> <h1>Hello World!</h1> </div> </body> </html>estilos.css
html, body { -webkit-app-region: drag; background-color: #2e2e2e; color: white; } .titleBar { /* -webkit-app-region: drag; */ background-color: #ffffff; width: 100%; height: 32px; }Su BrowserWindow debe tener su opción de frame configurada en false ; de lo contrario, se mostrará la barra de título nativa, que a su vez es utilizada por el sistema operativo para arrastrar la ventana, no su región html designada.
index.js
const { app, BrowserWindow } = require('electron'); let mainWindow; app.on('ready', () => { mainWindow = new BrowserWindow({ height: 600, width: 800, title: "Last Horizon", titleBarStyle: 'hidden', titleBarOverlay: { color: '#2e2e2e', symbolColor: '#ff6d4b' }, frame: false, // <-- Add this line webPreferences: { nodeIntegration: true } }); mainWindow.removeMenu() mainWindow.loadFile('src/index.html'); }); <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="styles.css"/> </head> <body> <div class="titleBar"></div> <div class="main"> <h1>Hello World!</h1> </div> </body> </html> styles.css
html, body { background-color: #2e2e2e; color: white; } .titleBar { -webkit-app-select: none; /* <-- Add this line */ -webkit-app-region: drag; /* <-- Add this line */ background-color: #ffffff; width: 100%; height: 32px; }Consulte Crear una ventana sin marco y Establecer una región arrastrable personalizada para obtener más información.
Además, consulte las opciones de BrowserWindow para obtener más información sobre la interacción entre titleBarStyle y titleBarOverlay .