https://github.com/electron-utils/electron-dockable
dockable panel for electron (work in progress...)
https://github.com/electron-utils/electron-dockable
dockable electron panel
Last synced: 2 months ago
JSON representation
dockable panel for electron (work in progress...)
- Host: GitHub
- URL: https://github.com/electron-utils/electron-dockable
- Owner: electron-utils
- License: mit
- Created: 2016-11-02T02:25:41.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-16T10:34:39.000Z (over 7 years ago)
- Last Synced: 2024-04-23T06:42:36.010Z (about 1 year ago)
- Topics: dockable, electron, panel
- Language: JavaScript
- Homepage:
- Size: 94.7 KB
- Stars: 50
- Watchers: 10
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# electron-dockable
[](https://travis-ci.org/electron-utils/electron-dockable)
[](https://ci.appveyor.com/project/jwu/electron-dockable)
[](https://david-dm.org/electron-utils/electron-dockable)
[](https://david-dm.org/electron-utils/electron-dockable#info=devDependencies)
**Work in progress...**
- [x] dock and undock in single page workspace
- [ ] pop out and dock in a panel
- [x] 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](https://developers.google.com/web/fundamentals/getting-started/primers/customelements) & [Shadow DOM v1](https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom).
## Install
```bash
npm install --save electron-dockable
```
## Run Examples
```bash
npm start ./examples/${name}
```
## Usage
**main process**
Please check [electron-panel](https://github.com/electron-utils/electron-panel) to learn how to define a panel-frame.
```javascript
'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
Workspace
body {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
display: flex;
flex-direction: column;
}
require('electron-dockable');
```
## Documentation
- TODO
- [Known Issues](./docs/known-issues.md)
## License
MIT © 2017 Johnny Wu