srcmini本文概述
在大多数使用自定义标题栏的桌面应用程序中, 它们通常不使用Windows, Mac或Linux的默认图形工具包, 因为通常无法通过单个应用程序对其进行自定义。因此, 对于这类需要对其进行自定义的应用程序, 最常见的解决方案是从根本上复制带有其自己的GUI组件的标题栏的行为, 删除原始标题栏并使用无框架的窗口。对于Electron应用程序, 也不例外, 因此, 如果你也愿意自定义标题栏, 则需要使用无框架的窗口并使用HTML, CSS和JavaScript创建标题栏。对你来说幸运的是, 已经有了一个实现此炫酷功能的模块, 可以轻松地安装它并根据需要对其进行自定义。
在本文中, 我们将向你解释如何实现灵感源自Visual Studio Code标题栏的自定义标题栏。
1.使用Node.js集成创建框架窗口
第一步, 你需要在要实现此自定义标题栏的窗口中定义一些属性。你将在Electron的主要过程(用于初始化第一个窗口的文件)中作为配置对象的属性来执行此操作, 该配置对象专门接收BrowserWindow实例。
我们必须像在Electron的先前版本中一样突出此步骤, 默认情况下已启用节点集成, 但是现在尚未启用, 它将始终将此属性设置为false, 因此请务必启用它以便能够在渲染器过程中需要该模块。禁用框架并将nodeIntegration设置为true的main.js文件中createWindow函数的示例：
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('path')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow
function createWindow() {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 800, height: 600, // 1. Remove the frame of the window
frame: false, webPreferences: {
preload: path.join(__dirname, 'preload.js'), // 2. Enable Node.js integration
nodeIntegration: true
}
})
// .... ///
}确定已配置这些属性后, 请继续安装模块。
2.安装自定义Electron标题栏
自定义Electron标题栏由@AlexTorresSk带给你。这个项目是Electron一个非常有用的打字稿库, 它允许你配置一个完全可自定义的标题栏, 该标题栏通过HTML, CSS和JavaScript实现(在每个平台上都不会使用本机模块来实现) )。
使用以下命令在你的Electron项目上安装模块：
npm install custom-electron-titlebar有关此模块的更多信息, 请访问Github上的官方存储库。
3.配置和初始化标题栏
要初始化标题栏, 你需要使用模块并创建Titlebar子类的新实例。该类期望将带有标题栏配置的对象作为构造函数中的参数。唯一需要的属性是backgroundColor, 以初始化栏, 你可以使用存储实例中的updateTitle方法更新窗口的标题：
// 1. Require the installed module
const customTitlebar = require('custom-electron-titlebar');
// 2. Create the custom titlebar with your own settings
// To make it work, we just need to provide the backgroundColor property
// Other properties are optional.
let MyTitleBar = new customTitlebar.Titlebar({
backgroundColor: customTitlebar.Color.fromHex('#03a9f4')
});
// 3. Update Titlebar text
MyTitleBar.updateTitle('Our Code World Tutorials Rock !');你可以自定义标题栏的某些属性, 以在配置对象中提供它们作为Titlebar类的第一个参数：
| 参数 | 类型 | 描述 | default |
|---|---|---|---|
| backgroundColor (required) | 颜色 | 标题栏的背景色。 | ＃444444 |
| 图标 | String | 标题栏左侧显示的图标。 | null |
| iconsTheme | 主题 | 图标的样式。 | Themebar.win |
| 阴影 | boolean | 标题栏的阴影。 | false |
| 拖动 | boolean | 定义是否可以通过单击标题栏来拖动窗口。 | true |
| 最小化 | boolean | 通过单击标题栏中的相应按钮, 启用或禁用最小化窗口的选项。 | true |
| 最大化的 | boolean | 通过单击标题栏中的相应按钮, 启用或禁用最大化或取消最大化窗口的选项。 | true |
| 封闭的 | boolean | 通过单击标题栏中的相应按钮来启用或禁用关闭窗口的选项。 | true |
| 订购 | String | 在标题栏上设置元素的顺序。 (倒置的第一按钮) | null |
| titleHorizontalAlignment | String | 设置窗口标题的水平对齐方式。 (左, 中, 右) | 中央 |
| 菜单 | Electron菜单 | 在标题栏中显示的菜单。 | Menu.getApplicationMenu() |
| menuPosition | String | 菜单栏在标题栏上的位置。 | 剩下 |
| enableMnemonics | boolean | 在菜单栏和菜单项上启用助记符。 | true |
| itemBackgroundColor | 颜色 | 鼠标悬停在项目上方时的背景颜色。 | rgba(0, 0, 0, .14) |
| 溢出 | String | The overflow of the container (auto, visible, hidden) | auto |
请记住, 你需要在渲染器进程上运行代码(在index.html文件中)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<!-- Renderer process logic -->
<script>
// 1. Require the installed module
const customTitlebar = require('custom-electron-titlebar');
// 2. Create the custom titlebar with your own settings
// To make it work, we just need to provide the backgroundColor property
// Other properties are optional.
let MyTitleBar = new customTitlebar.Titlebar({
backgroundColor: customTitlebar.Color.fromHex('#03a9f4'), shadow: true, icon: './icon.svg'
});
// 3. Update Titlebar text
MyTitleBar.updateTitle('Our Code World Tutorials Rock !');
</script>
</body>
</html>编码愉快！
评论前必须登录！
注册