# electron-dockable
**Repository Path**: mirrors_yorkie/electron-dockable
## Basic Information
- **Project Name**: electron-dockable
- **Description**: dockable panel for electron (work in progress...)
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-11-23
- **Last Updated**: 2026-05-17
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## 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
```
## Documentation
- TODO
- [Known Issues](./docs/known-issues.md)
## License
MIT © 2017 Johnny Wu