mirror of
https://github.com/mathuo/dockview
synced 2025-03-12 08:52:05 +00:00
150 lines
3.5 KiB
Plaintext
150 lines
3.5 KiB
Plaintext
---
|
|
sidebar_position: 0
|
|
description: A zero dependency layout manager built for React
|
|
---
|
|
|
|
import { SimpleSplitview } from '@site/src/components/simpleSplitview';
|
|
import { SimpleGridview } from '@site/src/components/simpleGridview';
|
|
import { SimplePaneview } from '@site/src/components/simplePaneview';
|
|
import SimpleDockview from '@site/sandboxes/simple-dockview/src/app';
|
|
|
|
# Introduction
|
|
|
|
**dockview** is a zero dependency layout manager that supports tab, grids and splitviews.
|
|
|
|
## Features
|
|
|
|
- Themable and customizable
|
|
- Support for the serialization and deserialization of layouts
|
|
- Drag and drop support
|
|
|
|
## Quick start
|
|
|
|
`dockview` has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. To install `dockview` you can run:
|
|
|
|
```shell
|
|
npm install dockview
|
|
```
|
|
|
|
You must also import the dockview stylesheet found under [`dockview/dict/styles/dockview.css`](https://unpkg.com/browse/dockview@latest/dist/styles/dockview.css),
|
|
depending on your solution this might be:
|
|
|
|
```css
|
|
@import './node_modules/dockview/dist/styles/dockview.css';
|
|
```
|
|
|
|
A dark and light theme are provided, one of these classes (or a custom theme) must be attached at any point above your components in the HTML tree. To cover the entire web page you might attach the class to the `body` component:
|
|
|
|
```html
|
|
<body classname="dockview-theme-abyss">
|
|
...
|
|
</body>
|
|
<body classname="dockview-theme-light">
|
|
...
|
|
</body>
|
|
```
|
|
|
|
There are 4 components you may want to use:
|
|
|
|
Splitview
|
|
|
|
<div
|
|
style={{
|
|
height: '100px',
|
|
backgroundColor: 'rgb(30,30,30)',
|
|
color: 'white',
|
|
margin: '20px 0px',
|
|
}}
|
|
>
|
|
<SimpleSplitview />
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
height: '300px',
|
|
backgroundColor: 'rgb(30,30,30)',
|
|
color: 'white',
|
|
margin: '20px 0px',
|
|
}}
|
|
>
|
|
<SimpleGridview />
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
height: '300px',
|
|
backgroundColor: 'rgb(30,30,30)',
|
|
color: 'white',
|
|
margin: '20px 0px',
|
|
}}
|
|
>
|
|
<SimplePaneview />
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
height: '300px',
|
|
backgroundColor: 'rgb(30,30,30)',
|
|
color: 'white',
|
|
margin: '20px 0px',
|
|
}}
|
|
>
|
|
<SimpleDockview />
|
|
</div>
|
|
|
|
```tsx
|
|
import {
|
|
DockviewReact,
|
|
DockviewReadyEvent,
|
|
PanelCollection,
|
|
IDockviewPanelProps,
|
|
IDockviewPanelHeaderProps,
|
|
} from 'dockview';
|
|
|
|
const components: PanelCollection<IDockviewPanelProps> = {
|
|
default: (props: IDockviewPanelProps<{ someProps: string }>) => {
|
|
return <div>{props.params.someProps}</div>;
|
|
},
|
|
};
|
|
|
|
const headers: PanelCollection<IDockviewPanelHeaderProps> = {
|
|
customTab: (props: IDockviewPanelHeaderProps) => {
|
|
return (
|
|
<div>
|
|
<span>{props.api.title}</span>
|
|
<span onClick={() => props.api.close()}>{'[x]'}</span>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
const Component = () => {
|
|
const onReady = (event: DockviewReadyEvent) => {
|
|
event.api.addPanel({
|
|
id: 'panel1',
|
|
component: 'default',
|
|
tabComponent: 'customTab', // optional custom header
|
|
params: {
|
|
someProps: 'Hello',
|
|
},
|
|
});
|
|
event.api.addPanel({
|
|
id: 'panel2',
|
|
component: 'default',
|
|
params: {
|
|
someProps: 'World',
|
|
},
|
|
position: { referencePanel: 'panel1', direction: 'below' },
|
|
});
|
|
};
|
|
|
|
return (
|
|
<DockviewReact
|
|
components={components}
|
|
tabComponents={headers} // optional headers renderer
|
|
onReady={onReady}
|
|
/>
|
|
);
|
|
};
|
|
```
|