Ocultación y personalización de la barra de título de electrones
Electron aplica un estilo de barra de título personalizado
Los estilos de la barra de título permiten ocultar la mayor parte del color de la ventana del navegador mientras dejan intactos los controles nativos de la ventana del sistema, y se pueden configurar BrowserWindowusando la opción en el constructor de titleBarStyle.
El resultado de aplicar el estilo de barra de título oculta es ocultar la barra de título y la ventana de contenido de tamaño completo.
const {
BrowserWindow } = require('electron')
const win = new BrowserWindow({
titleBarStyle: 'hidden' })
superposición de control de ventana
La API de superposición de controles de ventana es un estándar web que permite que las aplicaciones web personalicen el área de la barra de título cuando se instalan en el escritorio. BrowserWindowElectron expone esta API a través de las opciones del constructor titleBarOverlay.
titlebarStyleEsta opción solo está disponible cuando se aplican personalizaciones en macOS o Windows. Cuando está habilitado titleBarOverlay, los controles de ventana se exponen en sus posiciones predeterminadas, y los elementos DOM no pueden usar el área debajo de esta área.
Esta titleBarOverlayopción acepta dos formatos de valor diferentes.
Especificar verdadero en cualquiera de las plataformas hará que la superposición tenga los colores predeterminados del sistema:
// on macOS or Windows
const {
BrowserWindow } = require('electron')
const win = new BrowserWindow({
titleBarStyle: 'hidden',
titleBarOverlay: true
})
titleBarOverlayTambién puede ser un objeto en cualquier plataforma . En macOS y Windows, la altura de la superposición se puede especificar mediante la propiedad height. En Windows, el color de la superposición y su símbolo se pueden especificar utilizando colorlas propiedades y symbolColor, respectivamente.
Si no se especifica ninguna opción de color, el color predeterminado será el color del sistema de los botones de control de la ventana. Del mismo modo, si no se especifica ninguna opción de altura, se establecerá de forma predeterminada en la altura predeterminada:
// on Windows
const {
BrowserWindow } = require('electron')
const win = new BrowserWindow({
titleBarStyle: 'hidden',
titleBarOverlay: {
color: '#2f3241',
symbolColor: '#74b1be',
height: 60
}
})
Crear ventanas transparentes
Al establecer la opción transparente en verdadero, puede crear una ventana completamente transparente.
const {
BrowserWindow } = require('electron')
const win = new BrowserWindow({
transparent: true })
Palabras clave:
ventana personalizada de Electron, ocultación de la barra de título de Electron, ampliación del control de la barra de título de Electron, ampliación del botón de cierre de Electron, barra de tareas de ocultación de Electron