Paneview
A paneview is a collapsed collection of vertically stacked panels and panel headers. The panel header will always remain visible however the panel will only be visible when the panel is expanded.
Paneview panels can be re-ordered by dragging and dropping the panel headers.
Introduction
import {
IPaneviewPanelProps,
PaneviewReact,
PaneviewReadyEvent,
} from 'dockview';
const components = {
default: (props: IPaneviewPanelProps<{ title: string }>) => {
return (
<div
style={{
padding: '10px',
height: '100%',
backgroundColor: 'rgb(60,60,60)',
}}
>
{props.params.title}
</div>
);
},
};
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 (
<PaneviewReact
components={components}
headerComponents={headerComponents}
onReady={onReady}
className="dockview-theme-abyss"
/>
);
};
PaneviewReact Component
You can create a Paneview through the use of the ReactPaneview component.
import { ReactPaneview } from 'dockview';
className | |
|---|---|
components | |
disableAutoResizing | |
disableDnd | |
headerComponents | |
onReady | |
showDndOverlay | |
onDidDrop | |
Paneview API
The Paneview API is exposed both at the onReady event and on each panel through props.containerApi.
Through this API you can control general features of the component and access all added panels.
const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => {
// props.containerApi...
return <div>{`My first panel has the title: ${props.params.title}`}</div>;
};
const onReady = (event: GridviewReadyEvent) => {
// event.api...
};
height | Height of the component. |
|---|---|
maximumSize | The maximum size the component can reach where size is measured in the direction of orientation provided. |
minimumSize | The minimum size the component can reach where size is measured in the direction of orientation provided. |
onDidAddView | Invoked when a panel is added. May be called multiple times when moving panels. |
onDidDrop | Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality. |
onDidLayoutChange | Invoked when any layout change occures, an aggregation of many events. |
onDidLayoutFromJSON | Invoked after a layout is deserialzied using the fromJSON method. |
onDidRemoveView | Invoked when a panel is removed. May be called multiple times when moving panels. |
panels | All panel objects. |
width | Width of the component. |
addPanel | Add a panel and return the created object. |
clear | Reset the component back to an empty and default state. |
focus | Focus the component. Will try to focus an active panel if one exists. |
fromJSON | Create a component from a serialized object. |
getPanel | Get a panel object given a string id. May return undefined. |
layout | Force resize the component to an exact width and height. Read about auto-resizing before using. |
movePanel | Move a panel given it's current and desired index. |
removePanel | Remove a panel given the panel object. |
toJSON | Create a serialized object of the current component. |
Paneview Panel API
const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => {
// props.api...
return <div>{`My first panel has the title: ${props.params.title}`}</div>;
};
height | The panel height in pixels |
|---|---|
id | The id of the panel that would have been assigned when the panel was created |
isActive | Whether the panel is the actively selected panel |
isExpanded | |
isFocused | Whether the panel holds the current focus |
isVisible | Whether the panel is visible |
onDidActiveChange | |
onDidConstraintsChange | |
onDidDimensionsChange | |
onDidExpansionChange | |
onDidFocusChange | |
onDidVisibilityChange | |
onMouseEnter | |
onMouseLeave | |
width | The panel width in pixels |
setActive | |
setConstraints | |
setExpanded | |
setSize | |
setVisible | |
updateParameters | |
Advanced Features
Custom Header
You can provide a custom component to render an alternative header.
You can provide a headerComponent option when creating a panel to tell the library to use a custom header component.
const onReady = (event: PaneviewReadyEvent) => {
event.api.addPanel({
id: 'panel_1',
component: 'default',
headerComponent: 'myHeaderComponent',
params: {
valueA: 'A',
},
title: 'Panel 1',
});
};
This header must be defined in the collection of components provided to the headerComponents props for ReactPaneivew
import { IPaneviewPanelProps } from 'dockview';
const MyHeaderComponent = (props: IPaneviewPanelProps<{ title: string }>) => {
const [expanded, setExpanded] = React.useState<boolean>(
props.api.isExpanded
);
React.useEffect(() => {
const disposable = props.api.onDidExpansionChange((event) => {
setExpanded(event.isExpanded);
});
return () => {
disposable.dispose();
};
}, []);
const onClick = () => {
props.api.setExpanded(!expanded);
};
return (
<div
style={{
padding: '10px',
height: '100%',
backgroundColor: 'rgb(60,60,60)',
}}
>
<a
onClick={onClick}
className={expanded ? 'expanded' : 'collapsed'}
/>
<span>{props.params.title}</span>
</div>
);
};
const headerComponents = { myHeaderComponent: MyHeaderComponent };
Drag And Drop
If you provide the PaneviewReact component with the prop onDidDrop you will be able to interact with custom drop events.
Interactions
You can safely create multiple paneview instances within one page. They will not interact with each other by default.
If you wish to interact with the drop event from one paneview instance in another paneview instance you can implement the showDndOverlay and onDidDrop props on PaneviewReact.
As an example see how dragging a header from one control to another will only trigger an interactable event for the developer if the checkbox is enabled.