Electron Tabbed Interface Implementation | Chrome Tabs

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.

Review Documentation

See: jQuery Wrapper Documentation