@abmcode/electron-titlebar 中文文档教程

Question

Custom Electron Titlebar

这个项目是一个 electron 的 typescript 库，它允许你配置一个完全可定制的标题栏。

It is a library for electron, it cannot be used on a basic website.

告别是悲伤的。 但由于我没有时间保留这个项目，我决定在2020年8月14日存档。

我要感谢数百个支持和使用自定义电子标题栏的人，没有你这是不可能实现的。 对于 electron 10+，这是新项目：https://github.com/Treverix/custom-electron-titlebar

Install

npm i custom-electron-titlebar

或使用示例文件夹来初始化带有此标题栏的基本电子项目。

Usage

Step 1

在您的renderer 文件或HTML 脚本标记 中添加：

const customTitlebar = require('custom-electron-titlebar');

new customTitlebar.Titlebar({
    backgroundColor: customTitlebar.Color.fromHex('#444')
});

如果您使用的是typescript

import { Titlebar, Color } from 'custom-electron-titlebar'

new Titlebar({
    backgroundColor: Color.fromHex('#ECECEC')
});

参数backgroundColor: Color是必需的，这应该是 Color 类型。 （查看​​更新背景了解更多详情）。

Step 2

更新启动浏览器窗口

var mainWindow = new BrowserWindow({
      width: 1000,
      height: 600,
      titleBarStyle: "hidden", // add this line
});

Options

的代码管理接口[TitleBarOptions]，它有以下标题栏的可配置选项。 一些参数是可选的。

Parameter	Type	Description	Default
backgroundColor (required)	Color	The background color of the titlebar.	#444444
icon	string	The icon shown on the left side of the title bar.	null
iconsTheme	Theme	Style of the icons.	Themebar.win
shadow	boolean	The shadow of the titlebar.	false
drag	boolean	Define whether or not you can drag the window by holding the click on the title bar.	true
minimizable	boolean	Enables or disables the option to minimize the window by clicking on the corresponding button in the title bar.	true
maximizable	boolean	Enables or disables the option to maximize and un-maximize the window by clicking on the corresponding button in the title bar.	true
closeable	boolean	Enables or disables the option of the close window by clicking on the corresponding button in the title bar.	true
order	string	Set the order of the elements on the title bar. (inverted, first-buttons)	null
titleHorizontalAlignment	string	Set horizontal alignment of the window title. (left, center, right)	center
menu	Electron.Menu	The menu to show in the title bar.	Menu.getApplicationMenu()
menuPosition	string	The position of menubar on titlebar.	left
enableMnemonics	boolean	Enable the mnemonics on menubar and menu items.	true
itemBackgroundColor	Color	The background color when the mouse is over the item.	rgba(0, 0, 0, .14)
hideWhenClickingClose	boolean	When the close button is clicked, the window is hidden instead of closed.	false
overflow	string	The overflow of the container (auto, visible, hidden)	auto
unfocusEffect	boolean	Enables or disables the blur option in the title bar.	false

Methods

Update Background

这会改变标题栏的颜色，并检查颜色是浅色还是深色，以便图标的颜色适应标题栏的背景。

titlebar.updateBackground(new Color(new RGBA(0, 0, 0, .7)));

要分配颜色，您可以使用以下选项：Color.fromHex()、new Color(new RGBA(r, g, b, a))、new颜色（新 HSLA（h，s，l，a）），新颜色（新 HSVA（h，s，v，a）） 或 Color.BLUE、Color.RED 等。

Update Items Background Color

此方法在悬停菜单栏项目时更改背景颜色。

titlebar.updateItemBGColor(new Color(new RGBA(0, 0, 0, .7)));

要分配颜色，您可以使用以下选项：Color.fromHex()、new Color(new RGBA(r, g, b, a))、new颜色（新 HSLA（h，s，l，a）），新颜色（新 HSVA（h，s，v，a）） 或 Color.BLUE, Color.RED等。

Update Title

该方法更新了标题栏的title，如果改变了title标签的内容，需要调用该方法进行更新标题。

document.title = 'My new title';
titlebar.updateTitle();

// Or you can do as follows and avoid writing document.title
titlebar.updateTitle('New Title');

如果调用此方法并添加 title 参数，文档的标题将更改为参数的标题。

Update Icon

使用此方法，您可以更新图标。 此方法接收图像的 url （建议使用透明图像格式）

titlebar.updateIcon('./images/my-icon.svg');

Update Menu

此方法更新或创建菜单，使用 remote.Menu 和 remote.MenuItem 创建菜单。

const menu = new Menu();
menu.append(new MenuItem({
    label: 'Item 1',
    submenu: [
        {
            label: 'Subitem 1',
            click: () => console.log('Click on subitem 1')
        },
        {
            type: 'separator'
        }
    ]
}));

menu.append(new MenuItem({
    label: 'Item 2',
    submenu: [
        {
            label: 'Subitem checkbox',
            type: 'checkbox',
            checked: true
        },
        {
            type: 'separator'
        },
        {
            label: 'Subitem with submenu',
            submenu: [
                {
                    label: 'Submenu &item 1',
                    accelerator: 'Ctrl+T'
                }
            ]
        }
    ]
}));

titlebar.updateMenu(menu);

Update Menu Position

您可以更改菜单栏的位置。 left 和 bottom 是允许的。

titlebar.updateMenuPosition('bottom');

Set Horizontal Alignment

setHorizo​​ntalAlignment 方法由 @MairwunNx 贡献：punch:

left, center 和 right 被允许

titlebar.setHorizontalAlignment('right');

Dispose

此方法完全删除标题栏和所有记录的事件。

titlebar.dispose();

CSS Classes

存在以下 CSS 类，可用于自定义标题栏

Class name	Description
.titlebar	Styles the titlebar.
.window-appicon	Styles the app icon on the titlebar.
.window-title	Styles the window title. (Example: font-size)
.window-controls-container	Styles the window controls section.
.resizer top	Description missing
.resizer left	Description missing
.menubar	Description missing
.menubar-menu-button	Styles the main menu elements. (Example: color)
.menubar-menu-button open	Description missing
.menubar-menu-title	Description missing
.action-item	Description missing
.action-menu-item	Styles action menu elements. (Example: color)

Contributing

非常感谢所有通过问题和请求请求支持该项目的人。 如果您想为这个项目做出贡献，欢迎提出所有问题和拉取请求。

您还可以：

License

这个项目在 MIT 许可证。