A zero dependency layout manager based on the layering of split-view components with ReactJS support.
You can install the project from npm. The project comes 8064 with TypeScript typings.
npm install --save dockviewYou must import the core css stylesheet but you are free to supply your own theming in addition to the core stylesheet. The location to reference for the stylesheet is
dockview/dist/styles.css
By default the seperator between panels is transparent but this can be set through the CSS varibable --separator-border. Alternatively, or if you require the DockviewReact you should attach the classname of an included theme; either dockview-theme-dark or dockview-theme-light.
import {
ISplitviewPanelProps,
Orientation,
SplitviewReact,
SplitviewReadyEvent
} from "dockview";
const components = {
"my-component": (props: ISplitviewPanelProps) => {
return (
<div>
<span>This is a panel</span>
<span>{props.arbitraryProp}</span>
</div>
)
}
}
const Example = () => {
const onReady = (event: SplitviewReadyEvent) => {
event.addPanel({
id: "panel-1",
component: "my-component",
params: {
arbitraryProp: "Hello World"
}
});
event.addPanel({
id: "panel-2",
component: "my-component",
params: {
arbitraryProp: "World Hello"
}
});
}
return (
<SplitviewReact
components={components}
onReady={onReady}
orientation={Orientation.VERTICAL}
/>
)
}