Implementing tabs in Electron

To implement tabs for your application there is a neat project called electron-tabs. I've created demo application to demonstrate real use case how to configure and manipulate tabs.

First thing to explain is that electron-tabs will require to load your tab content in webview. So you'll have to have one HTML page which will embed electron-tabs tags and another page(s) which will be shown in content area when you click on a tab. Documentation is pretty straight-forward, so I won't go in the details here.

One thing that won't work by design is dev tools for content pages shown in tab view. If you try to open dev tools, it will open it for your main HTML page containing electron-tabs tags. But then how do you debug webview page? In demo you can see following part of the code:

let tab = tabGroup.addTab({  
    title: 'Home',
    src: './app.html',
    webviewAttributes: {
        'nodeintegration': true
    },
    icon: 'fa fa-home',
    visible: true,
    closable: false,
    active: true,
    ready: tab => {
        // Open dev tools for webview
        let webview = tab.webview;
        if (!!webview) {
            webview.addEventListener('dom-ready', () => {
                webview.openDevTools();
            })
        }
    }
});

On ready event, we're accessing webview instance and when it is ready, dev tools are opened.

Notice webviewAttributes as well. Turning nodeintegration is essential if you'll show page that will have to access Electron or Node API.

About Vjekoslav Ratkajec

Software developer from Zagreb, Croatia. Love programming, running, hiking and biking. Adore nature and animals. Also author of this blog.

Comments