How to customize the Electron title bar and how to make this as draggable

user_13960411 0
Viewed 789

I am working on a electron project and want to add a custom frame at the top. I wanted to see if someone was aware how to do this? Here is a Screen Shot Mockup up what I want the custom frame to be able to have in it: Mockup

I also want to be able to put some buttons and selectors in this area. If you can offer any help is achieving any of this please let me know!

electron node.js javascript
1 Answers
      const mainWindow = new BrowserWindow({
                width: 1200,
                height: 800,
                minWidth: 1200,
                minHeight: 800,
                titleBarStyle: 'hiddenInset',
                frame: false,
                webPreferences: {
                    nodeIntegration: true,
                    devTools: true
                }
            });

By setting titleBarStyle: false and frame: false The native title bar and default buttons will be hidden.

Now you can build the own title bar.

And then to make this draggable you need to use -webkit-app-region: drag Add this on your header CSS so that this header will be draggable region.

user_109098440
Related