Dock Layout for React Component


#### Popup panel as new browser window

#### Dark Theme

- Examples: https://ticlo.github.io/rc-dock/examples
- Docs: https://ticlo.github.io/rc-dock
- Discord: 

Usage


``jsx
import DockLayout from 'rc-dock'
import "rc-dock/dist/rc-dock.css";

...

defaultLayout = {
dockbox: {
mode: 'horizontal',
children: [
{
tabs: [
{id: 'tab1', title: 'tab1', content:

Hello World

}
]
}
]
}
};

render() {
return (
defaultLayout={defaultLayout}
style={{
position: "absolute",
left: 10,
top: 10,
right: 10,
bottom: 10,
}}
/>
)
}

`
- use as uncontrolled layout
- set layout object in DockLayout.defaultLayout
- use as controlled layout
- set layout object in DockLayout.layout

types

$3

| Property | Type | Comments | Default |
| :---: | :---: | :---: | :---: |
| dockbox | BoxData | main dock box | empty BoxData |
| floatbox | BoxData | main float box, children can only be PanelData | empty BoxData |

$3

a box is the layout element that contains other boxes or panels

| Property | Type | Comments | Default |
| :---: | :---: | :---: | :---: |
| mode | 'horizontal' | 'vertical' | 'float' | layout mode of the box | |
| children | (BoxData | PanelData)[] | children boxes or panels | required |

$3

a panel is a visiaul container with tabs button in the title bar

| Property | Type | Comments | Default |
| :---: | :---: | :---: | :---: |
| tabs | TabData[] | children tabs | required |
| panelLock | PanelLock | addition information of a panel, this prevents the panel from being removed when there is no tab inside, a locked panel can not be moved to float layer either | |

$3

| Property | Type | Comments | Default |
| :---: | :---: | :---: | :---: |
| id | string | unique id | required |
| title | string | ReactElement | tab title | required |
| content | ReactElement | (tab: TabData) => ReactElement | tab content | required |
| closable | bool | whether tab can be closed | false |
| group | string | tabs with different tab group can not be put in same panel, more options for the group can be defined as TabGroup in DefaultLayout.groups | |

DockLayout API

get the ref of the DockLayout component to use the following API

$3

save layout

`typescript
saveLayout(): SavedLayout
`

$3

load layout

`typescript
loadLayout(savedLayout: SavedLayout): void
`

$3

move a tab or a panel, if source is already in the layout, you can use the find method to get it with id first

`typescript
dockMove(source: TabData | PanelData, target: string | TabData | PanelData | BoxData, direction: DropDirection): void;
`

$3

find PanelData or TabData by id

`typescript
find(id: string): PanelData | TabData;
`

$3

update a tab with new TabData

returns false if the tab is not found

`typescript
updateTab(id: string, newTab: TabData): boolean;
``