如何自定义 Electron 应用程序的 window 标题栏？

Question

我开始使用 Electron 构建桌面应用程序。如何自定义 window 标题栏（包含关闭、最小化和全屏按钮）以添加自定义视图？ Safari 是我想到的一个例子：

Answer 1

您在 Electron 中唯一的选择是创建一个 frameless（又名无边界）window，然后创建一个带有 CSS 的 "fake" 标题栏，包括任何UI 个你需要的元素。

Electron/webkit 提供 CSS 属性，允许您使任何元素可拖动，例如标题栏：

.titlebar {
  -webkit-user-select: none;
  -webkit-app-region: drag;
}

Answer 2

第一个和cross-platform选项是创建一个frameless window。第二个仅适用于 macOS，允许您隐藏标题栏，但保留 window 控件，允许添加自定义按钮。示例：

const { BrowserWindow } = require('electron')

// This will create a window without titlebar, allowing for customization
let win = new BrowserWindow({ titleBarStyle: 'hidden' })
win.show()

然后您可以使用 css 属性 -webkit-user-select 和 -webkit-app-region 来指定拖动区域。

Answer 3

隐藏默认标题栏：

// main.js
window = new BrowserWindow({
    titlebarStyle: 'hidden',
    trafficLightPosition: {
        x: 15,
        y: 13,  // macOS traffic lights seem to be 14px in diameter. If you want them vertically centered, set this to `titlebar_height / 2 - 7`.
    },
})

然后使用 HTML + CSS:

创建您自己的人造标题栏

<!-- index.html -->
<body>
    <header class="titlebar"></header>
    ...
</body>

/* styles.css */
.titlebar {
    background-color: #f0f0f0;
    height: 40px;
    border-bottom: 1px solid #d0d0d0;
    -webkit-app-region: drag;    /* Allow user to drag the window using this titlebar */
    -webkit-user-select: none;   /* Prevent user from selecting things */
    user-select: none;
}

目前的结果：

注意标题栏出现在滚动条下面！它甚至在用户滚动时移动。 我们需要通过将标题栏下方的所有内容包装在 <div class="main-content"> 中，然后添加这些样式，将其与可滚动的 HTML 内容分开：

.main-content {
    height: calc(100vh - 40px);  /* Force the content to take up the viewport height minus the titlebar height */
    overflow: auto;              /* Allow the main content to be scrollable */
}
.body {
    overflow: hidden;            /* Make the HTML body be non-scrollable */
}

如何自定义 Electron 应用程序的 window 标题栏？

How to customize the window title bar of an Electron app?

macos

electron

目前的结果：

最终结果：