Skip to content
dockable panel for electron (work in progress...)
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
examples
lib
.eslintrc.json
.gitignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
appveyor.yml
index.js
package.json
yarn.lock

README.md

electron-dockable

Linux Build Status Windows Build status Dependency Status devDependency Status

Work in progress...

  • dock and undock in single page workspace
  • pop out and dock in a panel
  • save and restore dock layout
  • ui-dock-toolbar
  • ui-dock-panel (single panel, no tab-bar)
  • floating panel in workspace (always on top, set as child window in BrowserWindow)
  • provide a way to customize theme
  • provide a way to customize dock behaviors
  • unit tests
  • ...

Dockable ui framework for Electron. Use the Custom Element v1 & Shadow DOM v1.

Install

npm install --save electron-dockable

Run Examples

npm start ./examples/${name}

Usage

main process

Please check electron-panel to learn how to define a panel-frame.

'use strict';

const {app} = require('electron');
const protocols = require('electron-protocols');
const dockable = require('electron-dockable');

protocols.register('app', protocols.basepath(app.getAppPath()));

app.on('ready', function () {
  dockable.init({
    layout: {
      type: 'dock-area-v',
      children: [
        {
          type: 'panel-group',
          height: 300,
          active: 0,
          children: [
            { id: 'asset', src: 'app://panels/foo.js' } // a panel-frame defined by you
          ],
        },
        {
          type: 'dock-area-h',
          children: [
            {
              type: 'panel-group',
              active: 1,
              children: [
                { id: 'bar', src: 'app://panels/bar.js' } // a panel-frame defined by you
              ],
            },
            {
              type: 'panel-group',
              active: 0,
              children: [
                { id: 'bar-02', src: 'app://panels/bar.js' } // a panel-frame defined by you
              ],
            },
          ],
        },
      ]
    }
  });

  //
  dockable.windows.restore(`file://${__dirname}/index.html`, {
    center: true,
    width: 400,
    height: 600,
  });
});

renderer process

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Workspace</title>
    <style>
      body {
        position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
        display: flex;
        flex-direction: column;
      }
    </style>
  </head>

  <body>
    <ui-workspace style="flex: 1;"></ui-workspace>

    <script>
      require('electron-dockable');
    </script>
  </body>
</html>

Documentation

License

MIT © 2017 Johnny Wu

You can’t perform that action at this time.