Cómo crear una ventana sin marco personalizada (sin barra de título) con controles de minimizar, maximizar y cerrar en Electron Framework

Para crear una ventana sin cromo, o una ventana transparente de forma arbitraria, debe utilizar la API de ventana sin marco. Esta "api" le permite crear una ventana sin marco que no tiene cromo, las partes de la ventana, como las barras de herramientas, que no forman parte de la página web.

En un navegador, el cromo es cualquier aspecto visible de un navegador además de las propias páginas web (por ejemplo, barras de herramientas, barra de menú, pestañas). Para crear una ventana sin marco, debe establecer la propiedad frame en falso en la instancia de BrowserWindow que desee:

const {BrowserWindow} = require('electron')

let win = new BrowserWindow({
    width: 800, 
    height: 600, 
    frame: false
})

win.show()

Típicamente, es posible que desee habilitar esta función en su ventana principal ( main.js), que debería ser similar a:

function createWindow () {
    // Crea la ventana del navegador.
    mainWindow = new BrowserWindow({width: 800, height: 600, frame: false})

    // y cargue el index.html de la aplicación.
    mainWindow.loadURL(`file://${__dirname}/index.html`)

    // Abra DevTools.
    mainWindow.webContents.openDevTools()

    // Emitido cuando la ventana está cerrada.
    mainWindow.on('closed', function () {
     // Desreferenciar el objeto ventana, normalmente almacenarías ventanas
     // en una matriz si su aplicación admite múltiples ventanas, este es el momento
     // cuando deberías borrar el elemento correspondiente.
    mainWindow = null
    })
}

Cuya ejecución debería crear una ventana similar a:

Frameless window no toolbart

Sin embargo, probablemente no quieras quitarle al usuario la posibilidad de cerrar, minimizar o maximizar tu aplicación, por lo que debes aprender a hacerlo. Esos métodos están disponibles en BrowserWindow, por lo que solo necesita recuperar la ventana enfocada usando la constante BrowserWindow cuando está en el proceso de renderizado:

const {BrowserWindow} = require('electron').remote;
// Recuperar ventana enfocada
var theWindow = BrowserWindow.getFocusedWindow();

// Ejecuta tareas comunes
// Minimizar
theWindow.minimize();
// Maximizar la aplicación
theWindow.maximize();
// Cerrar app
theWindow.close();

Los botones típicos pero con algo de CSS y HTML

Puede crear la misma barra de herramientas que utiliza una aplicación de escritorio con HTML y CSS personalizados. 

En este ejemplo, usaremos el siguiente marcado:

<div id="title-bar">
    <div id="title">
        <span style="vertical-align: middle;">
            <img src="https://raw.githubusercontent.com/zeke/atom-icon/master/old-icon/2.png" style="width:20px;height:20px;"/>
        </span>
        Our Code World Frameless (But draggable,resizable and closable Window)
    </div>
     <div id="title-bar-btns">
          <button id="min-btn">-</button>
          <button id="max-btn">+</button>
          <button id="close-btn">x</button>
     </div>
</div>

Y algo de estilo para que se vea "bien":

body {
    padding: 0px;
    margin: 0px;
}

#title-bar {
    -webkit-app-region: drag;
    height: 40px;
    text-align: center;
    line-height: 40px;
    vertical-align: middle;
    background-color: #03a9f4;
    padding: none;
    margin: 0px;
}

#title {
    position: fixed;
    top: 0px;
    left: 6px;
    color:white;

}

#title-bar-btns {
    -webkit-app-region: no-drag;
    position: fixed;
    top: 0px;
    right: 6px;
}

Tenga en cuenta que la title-barclase tiene la clase que hace posible arrastrar la ventana por la pantalla; de lo contrario, su usuario se verá obligado a trabajar con su aplicación en una posición estática en la pantalla (cosa que probablemente no desee). -webkit-app-region: drag;hará del elemento seleccionado un punto para arrastrar toda la ventana alrededor de la pantalla de la misma manera que lo hace la barra de título original.

La implementación final en tu archivo index.html debería verse así:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My Electron Frameless Window</title>
        <style>
            body {
                padding: 0px;
                margin: 0px;
            }

            #title-bar {
                -webkit-app-region: drag;
                height: 40px;
                text-align: center;
                line-height: 40px;
                vertical-align: middle;
                background-color: #03a9f4;
                padding: none;
                margin: 0px;
            }

            #title {
                position: fixed;
                top: 0px;
                left: 6px;
                color:white;

            }

            #title-bar-btns {
                -webkit-app-region: no-drag;
                position: fixed;
                top: 0px;
                right: 6px;
            }
        </style>
    </head>
    <body>
        <div id="title-bar">
             <div id="title">
                 <span style="vertical-align: middle;"><img src="https://raw.githubusercontent.com/zeke/atom-icon/master/old-icon/2.png" style="width:20px;height:20px;"/></span>
                 Our Code World Frameless (But draggable,resizable and closable Window)
             </div>
             <div id="title-bar-btns">
                  <button id="min-btn">-</button>
                  <button id="max-btn">+</button>
                  <button id="close-btn">x</button>
             </div>
        </div>
        <div style="text-align:center;">
            <h4>Electron rocks!</h4>
            <img src="http://ourcodeworld.com/resources/img/ocw-empty.png" width="300" height="300"/>
        </div>

        <script>
        (function () {
            // Recuperar BrowserWindow remota
            const {BrowserWindow} = require('electron').remote

            function init() {
                // Minimizar tarea
                document.getElementById("min-btn").addEventListener("click", (e) => {
                    var window = BrowserWindow.getFocusedWindow();
                    window.minimize();
                });

                // Maximizar ventana
                document.getElementById("max-btn").addEventListener("click", (e) => {
                    var window = BrowserWindow.getFocusedWindow();
                    if(window.isMaximized()){
                        window.unmaximize();
                    }else{
                        window.maximize();
                    }
                });

                // Cerrar app
                document.getElementById("close-btn").addEventListener("click", (e) => {
                    var window = BrowserWindow.getFocusedWindow();
                    window.close();
                });
            };

            document.onreadystatechange =  () => {
                if (document.readyState == "complete") {
                    init();
                }
            };
        })();
        </script>
    </body>
</html>

Y la aplicación de resultados se verá así:

Frameless window in Electron

Que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable