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.
npm install --save electron-dockablenpm start ./examples/${name}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>- TODO
- Known Issues
MIT © 2017 Johnny Wu
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent