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

In Electron, customizing the window title bar involves several steps. This is typically done to enhance user experience with personalized features or to align the application's appearance with specific design aesthetics. Below are the fundamental steps to implement a custom window title bar:

1. Configure BrowserWindow

First, when creating a BrowserWindow, ensure the frame option is set to false. This removes the default window border and title bar, enabling customization.

javascript
const { BrowserWindow } = require('electron');

let mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,  // Critical point here
    webPreferences: {
        nodeIntegration: true
    }
});

2. Design the Custom Title Bar with HTML and CSS

Next, in your HTML file, create a custom title bar area based on your design requirements. For instance, add a div as the title bar and style it using CSS.

html
<!DOCTYPE html>
<html>
<head>
    <style>
        /* Basic style definitions */
        #titlebar {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            text-align: center;
            cursor: move;  // Add this property to improve user experience
        }
    </style>
</head>
<body>
    <div id="titlebar">My Custom Title Bar</div>
    <div id="content">
        <!-- Remaining application content -->
    </div>
</body>
</html>

3. Implement Window Control Logic

With the default title bar removed, manually implement functionality for minimizing, maximizing, and closing the window. Add buttons to the custom title bar and use Electron's API to control the window.

javascript
const remote = require('electron').remote;

document.getElementById('min-btn').addEventListener('click', function (e) {
    const window = remote.getCurrentWindow();
    window.minimize(); 
});

document.getElementById('max-btn').addEventListener('click', function (e) {
    const window = remote.getCurrentWindow();
    window.isMaximized() ? window.unmaximize() : window.maximize(); 
});

document.getElementById('close-btn').addEventListener('click', function (e) {
    const window = remote.getCurrentWindow();
    window.close();
});

4. (Optional) Implement Window Dragging

In certain scenarios, you may need to enable window dragging. Specify draggable regions using the CSS -webkit-app-region property.

css
#titlebar {
    -webkit-app-region: drag;
}

Case Study

In a prior project, we designed a modern user interface for a music player application, including a highly stylized custom title bar. By following these steps, we successfully achieved the design goals and enhanced overall user experience through meticulously crafted buttons and control scripts.

The above steps outline the fundamental approach to implementing a custom window title bar in Electron.

2024年6月29日 12:07 回复

1个答案

1. Configure BrowserWindow

2. Design the Custom Title Bar with HTML and CSS

3. Implement Window Control Logic

4. (Optional) Implement Window Dragging

Case Study

你的答案