自定义窗口

    A frameless window is a window that has no chrome. Not to be confused with the Google Chrome browser, window chrome refers to the parts of the window (e.g. toolbars, controls) that are not a part of the web page.

    To create a frameless window, you need to set frame to false in the BrowserWindow constructor.

    main.js

    应用自定义标题栏样式 macOS Windows

    Title bar styles allow you to hide most of a BrowserWindow’s chrome while keeping the system’s native window controls intact and can be configured with the titleBarStyle option in the BrowserWindow constructor.

    Applying the hidden title bar style results in a hidden title bar and a full-size content window.

    main.js

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

    On macOS, applying the hidden title bar style will still expose the standard window controls (“traffic lights”) in the top left.

    Customize the look of your traffic lights macOS

    The customButtonsOnHover title bar style will hide the traffic lights until you hover over them. This is useful if you want to create custom traffic lights in your HTML but still use the native UI to control the window.

    1. const { BrowserWindow } = require('electron')
    2. const win = new BrowserWindow({ titleBarStyle: 'customButtonsOnHover' })

    Customize the traffic light position macOS

    To modify the position of the traffic light window controls, there are two configuration options available.

    Applying hiddenInset title bar style will shift the vertical inset of the traffic lights by a fixed amount.

    main.js

    1. const { BrowserWindow } = require('electron')
    2. const win = new BrowserWindow({ titleBarStyle: 'hiddenInset' })

    If you need more granular control over the positioning of the traffic lights, you can pass a set of coordinates to the trafficLightPosition option in the BrowserWindow constructor.

    1. const { BrowserWindow } = require('electron')
    2. const win = new BrowserWindow({
    3.   titleBarStyle: 'hidden',
    4. })

    Show and hide the traffic lights programmatically macOS

    You can also show and hide the traffic lights programmatically from the main process. The win.setWindowButtonVisibility forces traffic lights to be show or hidden depending on the value of its boolean parameter.

    main.js

    The is a web standard that gives web apps the ability to customize their title bar region when installed on desktop. Electron exposes this API through the BrowserWindow constructor option .

    This option only works whenever a custom titlebarStyle is applied on macOS or Windows. When titleBarOverlay is enabled, the window controls become exposed in their default position, and DOM elements cannot use the area underneath this region.

    The titleBarOverlay option accepts two different value formats.

    Specifying true on either platform will result in an overlay region with default system colors:

    main.js

    1. // on macOS or Windows
    2. const { BrowserWindow } = require('electron')
    3. const win = new BrowserWindow({
    4.   titleBarStyle: 'hidden',
    5.   titleBarOverlay: true
    6. })

    On Windows, you can also specify the color of the overlay and its symbols by setting titleBarOverlay to an object with the color and symbolColor properties. If an option is not specified, the color will default to its system color for the window control buttons:

    main.js

    1. // on Windows
    2. const { BrowserWindow } = require('electron')
    3. const win = new BrowserWindow({
    4.   titleBarStyle: 'hidden',
    5.   titleBarOverlay: {
    6.     color: '#2f3241',
    7.     symbolColor: '#74b1be'
    8.   }
    9. })

    Note: Once your title bar overlay is enabled from the main process, you can access the overlay’s color and dimension values from a renderer using a set of readonly JavaScript APIs and .

    创建透明窗口

    By setting the transparent option to true, you can make a fully transparent window.

    1. const { BrowserWindow } = require('electron')
    2. const win = new BrowserWindow({ transparent: true })
    • You cannot click through the transparent area. See for details.
    • 透明窗口不可调整大小。 在某些平台上，将 resizable 设置为 可能会使透明窗口停止工作。
    • The CSS blur()) filter only applies to the window’s web contents, so there is no way to apply blur effect to the content below the window (i.e. other applications open on the user’s system).
    • 当打开开发者工具时，窗口将不透明。
    • On Windows:
      • Transparent windows can not be maximized using the Windows system menu or by double clicking the title bar. The reasoning behind this can be seen on PR .
    • On macOS:
      • The native window shadow will not be shown on a transparent window.

    要创建一个点击穿透窗口，也就是使窗口忽略所有鼠标事件，可以调用 win.setIgnoreMouseEvents(ignore) API：

    main.js

    1. const { BrowserWindow } = require('electron')
    2. const win = new BrowserWindow()
    3. win.setIgnoreMouseEvents(true)

    Ignoring mouse messages makes the web contents oblivious to mouse movement, meaning that mouse movement events will not be emitted. On Windows and macOS, an optional parameter can be used to forward mouse move messages to the web page, allowing events such as mouseleave to be emitted:

    main.js

    preload.js

    1. window.addEventListener('DOMContentLoaded', () => {
    2.   const el = document.getElementById('clickThroughElement')
    3.   el.addEventListener('mouseenter', () => {
    4.     ipcRenderer.send('set-ignore-mouse-events', true, { forward: true })
    5.   })
    6.   el.addEventListener('mouseleave', () => {
    7.     ipcRenderer.send('set-ignore-mouse-events', false)
    8.   })
    9. })

    This makes the web page click-through when over the #clickThroughElement element, and returns to normal outside it.

    Set custom draggable region

    默认情况下, 无边框窗口是不可拖拽的。 应用程序需要在 CSS 中指定 -webkit-app-region: drag 来告诉 Electron 哪些区域是可拖拽的（如操作系统的标准标题栏），在可拖拽区域内部使用 -webkit-app-region: no-drag 则可以将其中部分区域排除。 请注意, 当前只支持矩形形状。

    要使整个窗口可拖拽, 您可以添加 -webkit-app-region: drag 作为 body 的样式:

    styles.css

    1. body {
    2.   -webkit-app-region: drag;
    3. }

    请注意，如果您使整个窗口都可拖拽，则必须将其中的按钮标记为不可拖拽，否则用户将无法点击它们：

    styles.css

    1. button {
    2.   -webkit-app-region: no-drag;
    3. }

    如果只将自定义标题栏设置为可拖拽，还需要使标题栏中的所有按钮都不可拖拽。

    1. .titlebar {
    2.   -webkit-user-select: none;

    On some platforms, the draggable area will be treated as a non-client frame, so when you right click on it, a system menu will pop up. To make the context menu behave correctly on all platforms, you should never use a custom context menu on draggable areas.