CODEWITHSUNDEEP
javascriptnode.jselectron
Folded Lettuce
Folded Lettuce

Reputation: 41

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

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!

Upvotes: 3

Views: 2399

Answers (1)

tpikachu
tpikachu

Reputation: 4854

      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.

Upvotes: 3

Related Questions