mirror of
https://github.com/mathuo/dockview
synced 2025-02-08 17:35:44 +00:00
88 lines
2.0 KiB
Plaintext
88 lines
2.0 KiB
Plaintext
---
|
|
sidebar_position: 0
|
|
description: A zero dependency layout manager supporting ReactJS and Vanilla TypeScript
|
|
title: Introduction
|
|
---
|
|
|
|
import { MultiFrameworkContainer } from '@site/src/components/ui/container';
|
|
|
|
import { SimpleSplitview } from '@site/src/components/simpleSplitview';
|
|
import { SimpleGridview } from '@site/src/components/simpleGridview';
|
|
import { SimplePaneview } from '@site/src/components/simplePaneview';
|
|
// import DockviewDemo from '@site/sandboxes/demo-dockview/src/app';
|
|
import Link from '@docusaurus/Link';
|
|
|
|
**dockview** is a zero dependency layout manager that supports tab, grids and splitviews.
|
|
|
|
## 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';
|
|
```
|
|
|
|
There are 4 components you may want to use:
|
|
|
|
<Link to="./components/dockview">
|
|
<h2>Dockview</h2>
|
|
</Link>
|
|
|
|
{/* <MultiFrameworkContainer
|
|
height={500}
|
|
sandboxId="demo-dockview"
|
|
react={DockviewDemo}
|
|
/> */}
|
|
|
|
<Link to="./components/splitview">
|
|
<h2>Splitview</h2>
|
|
</Link>
|
|
|
|
<div
|
|
style={{
|
|
height: '100px',
|
|
backgroundColor: 'rgb(30,30,30)',
|
|
color: 'white',
|
|
margin: '20px 0px',
|
|
}}
|
|
>
|
|
<SimpleSplitview />
|
|
</div>
|
|
|
|
<Link to="./components/gridview">
|
|
<h2>Gridview</h2>
|
|
</Link>
|
|
|
|
<div
|
|
style={{
|
|
height: '300px',
|
|
backgroundColor: 'rgb(30,30,30)',
|
|
color: 'white',
|
|
margin: '20px 0px',
|
|
}}
|
|
>
|
|
<SimpleGridview />
|
|
</div>
|
|
|
|
<Link to="./components/paneview">
|
|
<h2>Paneview</h2>
|
|
</Link>
|
|
|
|
<div
|
|
style={{
|
|
height: '300px',
|
|
backgroundColor: 'rgb(30,30,30)',
|
|
color: 'white',
|
|
margin: '20px 0px',
|
|
}}
|
|
>
|
|
<SimplePaneview />
|
|
</div>
|