❤
npm
Sign UpSign In

electron-dockable

0.9.5 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i electron-dockable

Repository

github.com/electron-utils/electron-dockable

Homepage

github.com/electron-utils/electron-dockable

Weekly Downloads

4

Version

0.9.5

License

MIT

Last publish

Collaborators

  • johnnywu
Try on RunKit
Report malware