electron 自定义标题栏(windows 系统)
其实没有网上那么麻烦,如果你仅仅只是想去掉标题,还有下面的工具栏,只需要如下配置const win = new BrowserWindow({width: 800,height: 600,titleBarStyle: "hidden",titleBarOverlay: {color: "#fff",symbolColor: "black",}});这样就会出现原生的最小化,关闭等按钮在 win 的
·
其实没有网上那么麻烦,如果你仅仅只是想去掉标题,还有下面的工具栏,只需要如下配置
const win = new BrowserWindow({
width: 800,
height: 600,
titleBarStyle: "hidden",
titleBarOverlay: {
color: "#fff",
symbolColor: "black",
}
});
这样就会出现原生
的最小化,关闭等按钮在 win 的右侧,主要这个区域是悬浮在整个软件右上角的。
鼠标移上去,可以看到支持 win11 的布局功能
以下源码大部分截取自 electron 初始化例子 https://www.electronjs.org/zh/docs/latest/tutorial/examples
注意
如果你需要完全重写标题栏,那这个方案不是你想要的。
源码
index.js
const { app, BrowserWindow } = require("electron");
const path = require("path");
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
/** 主要代码 */
titleBarStyle: "hidden",
titleBarOverlay: {
color: "#f8f8f8",
symbolColor: "black",
},
webPreferences: {
devTools: true,
preload: path.join(__dirname, "preload.js"),
},
});
win.loadFile("index.html")
.then((result) => {
win.webContents.openDevTools();
})
.catch((err) => {});
}
app.whenReady().then(() => {
createWindow();
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
index.html
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';">
<style>
body {
margin: 0;
}
/** 主要代码 */
.title {
height: 32px;
background-color: #f8f8f8;
-webkit-app-region: drag;
}
</style>
</head>
<body>
<!-- 主要代码 -->
<div class="title"></div>
<h1>Hello World!</h1>
<p>
We are using Node.js <span id="node-version">16.5.0</span>,
Chromium <span id="chrome-version">94.0.4606.81</span>,
and Electron <span id="electron-version">15.3.1</span>.
</p>
</body>
</html>
preload.js
window.addEventListener("DOMContentLoaded", () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector);
if (element) element.innerText = text;
};
for (const type of ["chrome", "node", "electron"]) {
replaceText(`${type}-version`, process.versions[type]);
}
});
更多推荐
已为社区贡献2条内容
所有评论(0)