rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-05-07 20:18:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: update docs

Browse Source
This commit is contained in:
mathuo 2022-09-20 21:51:04 +01:00
parent 19ecd531e1
commit 407d9b3aad
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
4 changed files with 152 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/docs/docs/components/dockview.mdx
View File

@ -12,6 +12,7 @@ import { EventsDockview } from '@site/src/components/dockview/events';
import { ContextMenuDockview } from '@site/src/components/dockview/contextMenu';
import { NestedDockview } from '@site/src/components/dockview/nested';
import { CustomHeadersDockview } from '@site/src/components/dockview/customHeaders';
import { ResizeDockview } from '@site/src/components/dockview/resize';
import Link from '@docusaurus/Link';
# Dockview
@ -176,6 +177,10 @@ const onResizePanel = () => {
};
```
Here is a working example of resizing panels via these API methods.
<ResizeDockview />
### Locked group
Locking a group will disable all drop events for this group ensuring a user can not add additional panels to the group.

15
packages/docs/src/components/dockview/demo.tsx
View File

@ -209,8 +209,9 @@ const Icon = (props: {
};
const Button = () => {
const [position, setPosition] =
React.useState<{ x: number; y: number } | undefined>(undefined);
const [position, setPosition] = React.useState<
{ x: number; y: number } | undefined
>(undefined);
const close = () => setPosition(undefined);
@ -318,6 +319,16 @@ export const DockviewDemo = () => {
event.api.addEmptyGroup();
event.api.getPanel('panel_1').api.setActive();
setInterval(() => {
event.api.getPanel('panel_1').update({
params: {
params: {
title: Date.now().toString(),
},
},
});
}, 1000);
};
return (

23
packages/docs/src/components/dockview/resize.scss Normal file
View File

@ -0,0 +1,23 @@
.resize-panel {
padding: 10px;
color: white;
.resize-control {
display: flex;
height: 18px;
line-height: 18px;
font-size: 13px;
span {
width: 60px;
}
input {
width: 75px;
}
button {
width: 50px;
}
}
}

111
packages/docs/src/components/dockview/resize.tsx Normal file
View File

@ -0,0 +1,111 @@
import {
DockviewReact,
DockviewReadyEvent,
IDockviewPanelProps,
} from 'dockview';
import * as React from 'react';
import './resize.scss';
const Default = (props: IDockviewPanelProps) => {
const [width, setWidth] = React.useState<number>(100);
const [height, setHeight] = React.useState<number>(100);
return (
<div className="resize-panel">
<div style={{ height: '25px' }}>{props.api.title}</div>
<div className="resize-control">
<span>Width:</span>
<input
value={width}
onChange={(e) => setWidth(Number(e.target.value))}
type="number"
min={50}
step={1}
/>
<button
onClick={() => {
props.api.group.api.setSize({
width,
});
}}
>
Set
</button>
</div>
<div className="resize-control">
<span>Height:</span>
<input
value={height}
onChange={(e) => setHeight(Number(e.target.value))}
type="number"
min={50}
step={1}
/>
<button
onClick={() => {
props.api.group.api.setSize({
height,
});
}}
>
Set
</button>
</div>
</div>
);
};
const components = {
default: Default,
};
export const ResizeDockview = () => {
const onReady = (event: DockviewReadyEvent) => {
event.api.addPanel({
id: 'panel_1',
component: 'default',
});
event.api.addPanel({
id: 'panel_2',
component: 'default',
position: {
direction: 'right',
referencePanel: 'panel_1',
},
});
event.api.addPanel({
id: 'panel_3',
component: 'default',
position: {
direction: 'below',
referencePanel: 'panel_1',
},
});
event.api.addPanel({
id: 'panel_4',
component: 'default',
});
event.api.addPanel({
id: 'panel_5',
component: 'default',
});
};
return (
<div
style={{
height: '500px',
display: 'flex',
flexDirection: 'column',
}}
>
<DockviewReact
className="dockview-theme-dark"
onReady={onReady}
components={components}
/>
</div>
);
};