pwa-synergy-dock v1.1.20
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
import DockLayout from 'rc-dock'
import "rc-dock/dist/rc-dock.css";
...
defaultLayout = {
dockbox: {
mode: 'horizontal',
children: [
{
tabs: [
{id: 'tab1', title: 'tab1', content: <div>Hello World</div>}
]
}
]
}
};
render() {
return (
<DockLayout
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
LayoutData 🗎
Property | Type | Comments | Default |
---|---|---|---|
dockbox | BoxData | main dock box | empty BoxData |
floatbox | BoxData | main float box, children can only be PanelData | empty BoxData |
BoxData 🗎
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 |
PanelData 🗎
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 |
TabData 🗎
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
saveLayout 🗎
save layout
saveLayout(): SavedLayout
loadLayout 🗎
load layout
loadLayout(savedLayout: SavedLayout): void
dockMove 🗎
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
dockMove(source: TabData | PanelData, target: string | TabData | PanelData | BoxData, direction: DropDirection): void;
find 🗎
find PanelData or TabData by id
find(id: string): PanelData | TabData;
updateTab 🗎
update a tab with new TabData
returns false if the tab is not found
updateTab(id: string, newTab: TabData): boolean;
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago