Electron标题栏隐藏和自定义

Electron应用自定义标题栏样式

标题栏样式允许隐藏浏览器窗口的大部分色彩，同时保持系统原生窗口控件完整无损，并可以在 BrowserWindow 的构造器中使用 titleBarStyle 选项来配置。

应用 hidden 标题栏样式的结果是隐藏标题栏和全尺寸内容窗口。

const {
    
     BrowserWindow } = require('electron')
const win = new BrowserWindow({
    
     titleBarStyle: 'hidden' })

在这里插入图片描述

窗口控件覆盖

Window Controls Overlay API是一种网络标准，它使网络应用程序能够在安装到桌面时自定义其标题栏区域。BrowserWindowElectron 通过构造函数选项公开此 API titleBarOverlay。

titlebarStyle只有在 macOS 或 Windows 上应用自定义时，此选项才有效。启用后titleBarOverlay，窗口控件会在其默认位置暴露，并且 DOM 元素无法使用该区域下方的区域。

该titleBarOverlay选项接受两种不同的值格式。

在任一平台上指定true将导致覆盖区域具有默认系统颜色：

// on macOS or Windows
const {
    
     BrowserWindow } = require('electron')
const win = new BrowserWindow({
    
    
  titleBarStyle: 'hidden',
  titleBarOverlay: true
})

在这里插入图片描述

在任一平台上titleBarOverlay也可以是一个对象。在 macOS 和 Windows 上，可以使用属性指定叠加层的高度height。在 Windows 上，叠加层的颜色及其符号可以分别使用color和symbolColor属性指定。

如果未指定颜色选项，则颜色将默认为窗口控制按钮的系统颜色。同样，如果未指定高度选项，它将默认为默认高度：

// on Windows
const {
    
     BrowserWindow } = require('electron')
const win = new BrowserWindow({
    
    
  titleBarStyle: 'hidden',
  titleBarOverlay: {
    
    
    color: '#2f3241',
    symbolColor: '#74b1be',
    height: 60
  }
})

在这里插入图片描述

创建透明窗口

通过设置 transparent 选项为 true，您可以创建一个完全透明的窗口。

const {
    
     BrowserWindow } = require('electron')
const win = new BrowserWindow({
    
     transparent: true })

在这里插入图片描述

关键词:
Electron自定义窗口、Electron标题栏隐藏、Electron标题栏控件放大、Electron关闭按钮放大、Electron隐藏任务栏

Electron自定义窗口

Electron标题栏隐藏和自定义

Electron应用自定义标题栏样式

窗口控件覆盖

创建透明窗口

猜你喜欢