Electron自定义窗口

Electron标题栏隐藏和自定义

Electron应用自定义标题栏样式

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

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

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

Electron自定义窗口_第1张图片

窗口控件覆盖

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
})

Electron自定义窗口_第2张图片

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

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

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

Electron自定义窗口_第3张图片

创建透明窗口

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

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

Electron自定义窗口_第4张图片


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

你可能感兴趣的:(个人日志,electron,javascript,前端)