Socket
Socket
Sign inDemoInstall

electron-dockable

Package Overview
Dependencies
93
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    electron-dockable

Dockable ui framework for Electron


Version published
Weekly downloads
7
increased by250%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

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

Keywords

FAQs

Last updated on 27 May 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc