如何自定义Electron应用程序的窗口标题栏？
我正在开始与Electron合作构建一个桌面应用程序.如何自定义窗口标题栏(包含关闭,最小化和全屏按钮)以添加自定义视图？Safari就是我想到的一个例子:
Tea*_*eak 19
您在Electron中唯一的选择是创建一个无框(也称为无边框)窗口,然后使用CSS创建一个"假"标题栏,包括您需要的任何UI元素.
Electron/webkit提供了CSS属性,允许您使任何元素可拖动,如标题栏:
.titlebar {
-webkit-user-select: none;
-webkit-app-region: drag;
}
16p*_*sle 16
第一个跨平台选项是创建无框窗口.第二个是macOS,允许你隐藏标题栏,但保留窗口控件,允许添加自定义按钮.例:
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指定拖动区域.
通过创建无框窗口隐藏默认标题栏：
// 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;
}
到目前为止的结果：
请注意，标题栏出现在滚动条下方。当用户滚动时它甚至会移动。我们需要将标题栏下方的所有内容包装在 a 中<div class="main-content">，然后添加以下样式，将其与可滚动内容分开：
.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 */
}
最后结果：
现在您可以在其中添加任何您想要的 HTML 内容。
| 归档时间： |
|
| 查看次数： |
14243 次 |
| 最近记录： |