) => {
+ return
{props.params.title}
;
+ },
+};
+
+export const SimpleDockview = () => {
+ const onReady = (event: DockviewReadyEvent) => {
+ event.api.onDidLayoutChange(() => {
+ localStorage.setItem(
+ 'dockview_test',
+ JSON.stringify(event.api.toJSON())
+ );
+ });
+
+ const layout = localStorage.getItem('dockview_test');
+
+ if (layout) {
+ event.api.fromJSON(JSON.parse(layout));
+ return;
+ }
+
+ event.api.addPanel({
+ id: 'panel_1',
+ component: 'default',
+ params: {
+ title: 'Panel 1',
+ },
+ });
+
+ event.api.addPanel({
+ id: 'panel_2',
+ component: 'default',
+ params: {
+ title: 'Panel 2',
+ },
+ });
+
+ event.api.addPanel({
+ id: 'panel_3',
+ component: 'default',
+ params: {
+ title: 'Panel 3',
+ },
+ });
+
+ event.api.addPanel({
+ id: 'panel_4',
+ component: 'default',
+ params: {
+ title: 'Panel 4',
+ },
+ position: { referencePanelId: 'panel_1', direction: 'right' },
+ });
+
+ const panel5 = event.api.addPanel({
+ id: 'panel_5',
+ component: 'default',
+ params: {
+ title: 'Panel 5',
+ },
+ position: { referencePanelId: 'panel_3', direction: 'right' },
+ });
+
+ // panel5.group!.model.header.hidden = true;
+ // panel5.group!.model.locked = true;
+
+ event.api.addPanel({
+ id: 'panel_6',
+ component: 'default',
+ params: {
+ title: 'Panel 6',
+ },
+ position: { referencePanelId: 'panel_5', direction: 'below' },
+ });
+
+ event.api.addPanel({
+ id: 'panel_7',
+ component: 'default',
+ params: {
+ title: 'Panel 7',
+ },
+ position: { referencePanelId: 'panel_6', direction: 'right' },
+ });
+ };
+
+ return (
+
+ );
+};
diff --git a/packages/dockview-docs/src/components/simpleGridview.tsx b/packages/dockview-docs/src/components/simpleGridview.tsx
new file mode 100644
index 000000000..71c2715c7
--- /dev/null
+++ b/packages/dockview-docs/src/components/simpleGridview.tsx
@@ -0,0 +1,85 @@
+import {
+ IGridviewPanelProps,
+ Orientation,
+ GridviewReact,
+ GridviewReadyEvent,
+} from 'dockview';
+
+const components = {
+ default: (props: IGridviewPanelProps<{ title: string }>) => {
+ return
{props.params.title}
;
+ },
+};
+
+export const SimpleGridview = () => {
+ const onReady = (event: GridviewReadyEvent) => {
+ event.api.addPanel({
+ id: 'panel_1',
+ component: 'default',
+ params: {
+ title: 'Panel 1',
+ },
+ });
+
+ event.api.addPanel({
+ id: 'panel_2',
+ component: 'default',
+ params: {
+ title: 'Panel 2',
+ },
+ });
+
+ event.api.addPanel({
+ id: 'panel_3',
+ component: 'default',
+ params: {
+ title: 'Panel 3',
+ },
+ });
+
+ event.api.addPanel({
+ id: 'panel_4',
+ component: 'default',
+ params: {
+ title: 'Panel 4',
+ },
+ position: { reference: 'panel_1', direction: 'right' },
+ });
+
+ event.api.addPanel({
+ id: 'panel_5',
+ component: 'default',
+ params: {
+ title: 'Panel 5',
+ },
+ position: { reference: 'panel_3', direction: 'right' },
+ });
+
+ event.api.addPanel({
+ id: 'panel_6',
+ component: 'default',
+ params: {
+ title: 'Panel 6',
+ },
+ position: { reference: 'panel_5', direction: 'below' },
+ });
+
+ event.api.addPanel({
+ id: 'panel_7',
+ component: 'default',
+ params: {
+ title: 'Panel 7',
+ },
+ position: { reference: 'panel_6', direction: 'right' },
+ });
+ };
+
+ return (
+
+ );
+};
diff --git a/packages/dockview-docs/src/components/simplePaneview.tsx b/packages/dockview-docs/src/components/simplePaneview.tsx
new file mode 100644
index 000000000..37e6cddc2
--- /dev/null
+++ b/packages/dockview-docs/src/components/simplePaneview.tsx
@@ -0,0 +1,50 @@
+import {
+ IPaneviewPanelProps,
+ PaneviewReact,
+ PaneviewReadyEvent,
+} from 'dockview';
+
+const components = {
+ default: (props: IPaneviewPanelProps<{ title: string }>) => {
+ return
{props.params.title}
;
+ },
+};
+
+export const SimplePaneview = () => {
+ const onReady = (event: PaneviewReadyEvent) => {
+ event.api.addPanel({
+ id: 'panel_1',
+ component: 'default',
+ params: {
+ title: 'Panel 1',
+ },
+ title: 'Panel 1',
+ });
+
+ event.api.addPanel({
+ id: 'panel_2',
+ component: 'default',
+ params: {
+ title: 'Panel 2',
+ },
+ title: 'Panel 2',
+ });
+
+ event.api.addPanel({
+ id: 'panel_3',
+ component: 'default',
+ params: {
+ title: 'Panel 3',
+ },
+ title: 'Panel 3',
+ });
+ };
+
+ return (
+
+ );
+};
diff --git a/packages/dockview-docs/src/components/simpleSplitview.tsx b/packages/dockview-docs/src/components/simpleSplitview.tsx
index dfa95a711..93ecad8b1 100644
--- a/packages/dockview-docs/src/components/simpleSplitview.tsx
+++ b/packages/dockview-docs/src/components/simpleSplitview.tsx
@@ -7,11 +7,11 @@ import {
const components = {
default: (props: ISplitviewPanelProps<{ title: string }>) => {
- return
{props.params.title}
;
+ return
{props.params.title}
;
},
};
-export const SimpleSplitview = () => {
+export const SimpleSplitview = (props: { proportional?: boolean }) => {
const onReady = (event: SplitviewReadyEvent) => {
event.api.addPanel({
id: 'panel_1',
@@ -19,6 +19,7 @@ export const SimpleSplitview = () => {
params: {
title: 'Panel 1',
},
+ minimumSize: 100,
});
event.api.addPanel({
@@ -27,6 +28,7 @@ export const SimpleSplitview = () => {
params: {
title: 'Panel 2',
},
+ minimumSize: 100,
});
event.api.addPanel({
@@ -35,12 +37,14 @@ export const SimpleSplitview = () => {
params: {
title: 'Panel 3',
},
+ minimumSize: 100,
});
};
return (
+
+