Chrome Tabs work great as a tabbed interface for Electron apps. A good example is Slick (an app that uses Chrome Tabs to navigate Slack teams).
Instructions
Install Node Module
npm install x-chrome-tabs --save
Add Styles
This goes in your .html
document (the Electron Renderer Process).
<link rel="stylesheet" href="node_modules/x-chrome-tabs/src/css/base.min.css" />
<link rel="stylesheet" href="node_modules/x-chrome-tabs/src/css/dark.min.css" />
<style>
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #e6e6e6;
}
</style>
Add HTML Markup
Again, this goes in your .html
document (the Electron Renderer Process).
<div class="chrome-tabs"></div>
If you want the dark theme, add the -dark-theme
class.
<div class="chrome-tabs -dark-theme"></div>
Add jQuery Snippet
Again, this goes in your .html
document (the Electron Renderer Process).
<script>
let $ = require('jquery');
$.fn.chromeTabs = require('x-chrome-tabs');
$(document).ready(() => {
$('.chrome-tabs').chromeTabs({views: 'webviews'});
});
</script>
Note: Any version of jQuery >= v2.2.4 will do fine.