mirror of
https://github.com/mathuo/dockview
synced 2025-01-22 17:35:57 +00:00
Merge pull request #524 from mathuo/475-improved-docs-1
chore: fix docs
This commit is contained in:
commit
d2baa1371c
File diff suppressed because it is too large
Load Diff
@ -1,87 +1 @@
|
|||||||
---
|
landing
|
||||||
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>
|
|
||||||
|
6
packages/docs/docs/other/gridview/_category_.json
Normal file
6
packages/docs/docs/other/gridview/_category_.json
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"position": 1,
|
||||||
|
"label": "Gridview",
|
||||||
|
"collapsible": true,
|
||||||
|
"collapsed": true
|
||||||
|
}
|
7
packages/docs/docs/other/gridview/overview.mdx
Normal file
7
packages/docs/docs/other/gridview/overview.mdx
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
---
|
||||||
|
title: Overview
|
||||||
|
sidebar_position: 0
|
||||||
|
---
|
||||||
|
|
||||||
|
The implementation of the dock is a collection of nested *splitview* controls forming a *gridview*
|
||||||
|
which is exposed as a seperate component to be used independantly.
|
6
packages/docs/docs/other/paneview/_category_.json
Normal file
6
packages/docs/docs/other/paneview/_category_.json
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"position": 2,
|
||||||
|
"label": "Paneview",
|
||||||
|
"collapsible": true,
|
||||||
|
"collapsed": true
|
||||||
|
}
|
6
packages/docs/docs/other/paneview/overview.mdx
Normal file
6
packages/docs/docs/other/paneview/overview.mdx
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
---
|
||||||
|
title: Overview
|
||||||
|
sidebar_position: 0
|
||||||
|
---
|
||||||
|
|
||||||
|
A *splitview* control where each panel contains a header and collapsable content.
|
6
packages/docs/docs/other/splitview/_category_.json
Normal file
6
packages/docs/docs/other/splitview/_category_.json
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"position": 0,
|
||||||
|
"label": "Splitview",
|
||||||
|
"collapsible": true,
|
||||||
|
"collapsed": true
|
||||||
|
}
|
7
packages/docs/docs/other/splitview/overview.mdx
Normal file
7
packages/docs/docs/other/splitview/overview.mdx
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
---
|
||||||
|
title: Overview
|
||||||
|
sidebar_position: 0
|
||||||
|
---
|
||||||
|
|
||||||
|
The implementation of the dock is a collection of nested *splitview* controls
|
||||||
|
which is exposed as a seperate component to be used independantly.
|
@ -106,11 +106,11 @@ const config = {
|
|||||||
// Remove this to remove the "edit this page" links.
|
// Remove this to remove the "edit this page" links.
|
||||||
editUrl:
|
editUrl:
|
||||||
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
|
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
|
||||||
versions: {
|
// versions: {
|
||||||
current: {
|
// current: {
|
||||||
label: `Development 🚧`,
|
// label: `Development 🚧`,
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
},
|
},
|
||||||
blog: {
|
blog: {
|
||||||
showReadingTime: true,
|
showReadingTime: true,
|
||||||
@ -188,10 +188,10 @@ const config = {
|
|||||||
// position: 'left',
|
// position: 'left',
|
||||||
// },
|
// },
|
||||||
|
|
||||||
{
|
// {
|
||||||
type: 'docsVersionDropdown',
|
// type: 'docsVersionDropdown',
|
||||||
position: 'right',
|
// position: 'right',
|
||||||
},
|
// },
|
||||||
{
|
{
|
||||||
href: 'https://github.com/mathuo/dockview',
|
href: 'https://github.com/mathuo/dockview',
|
||||||
position: 'right',
|
position: 'right',
|
||||||
|
87
packages/docs/old_docs_DELETE_SOON/index.mdx
Normal file
87
packages/docs/old_docs_DELETE_SOON/index.mdx
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
---
|
||||||
|
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>
|
@ -30,6 +30,14 @@ const sidebars = {
|
|||||||
className: 'sidebar-section-header',
|
className: 'sidebar-section-header',
|
||||||
items: [{ type: 'autogenerated', dirName: 'core' }],
|
items: [{ type: 'autogenerated', dirName: 'core' }],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
label: 'Auxilliary Components',
|
||||||
|
collapsible: false,
|
||||||
|
collapsed: false,
|
||||||
|
className: 'sidebar-section-header',
|
||||||
|
items: [{ type: 'autogenerated', dirName: 'other' }],
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
label: 'Advanced Features',
|
label: 'Advanced Features',
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import { Emitter } from 'dockview-core/dist/cjs/events';
|
import BrowserOnly from '@docusaurus/BrowserOnly';
|
||||||
|
import { DockviewEmitter } from 'dockview';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
|
||||||
const frameworks = [
|
const frameworks = [
|
||||||
@ -7,11 +8,7 @@ const frameworks = [
|
|||||||
{ value: 'Angular', label: 'Angular' },
|
{ value: 'Angular', label: 'Angular' },
|
||||||
];
|
];
|
||||||
|
|
||||||
const activeFrameworkGlobal = new Emitter<string>({ replay: true });
|
const activeFrameworkGlobal = new DockviewEmitter<string>({ replay: true });
|
||||||
|
|
||||||
activeFrameworkGlobal.fire(
|
|
||||||
localStorage.getItem('dv-docs-framework') ?? frameworks[0].value
|
|
||||||
);
|
|
||||||
|
|
||||||
function useActiveFramework(): [string, (value: string) => void] {
|
function useActiveFramework(): [string, (value: string) => void] {
|
||||||
const [value, setValue] = React.useState<string>(
|
const [value, setValue] = React.useState<string>(
|
||||||
@ -23,6 +20,10 @@ function useActiveFramework(): [string, (value: string) => void] {
|
|||||||
setValue(value),
|
setValue(value),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
activeFrameworkGlobal.fire(
|
||||||
|
localStorage.getItem('dv-docs-framework') ?? frameworks[0].value
|
||||||
|
);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
disposable.dispose();
|
disposable.dispose();
|
||||||
};
|
};
|
||||||
@ -37,16 +38,7 @@ function useActiveFramework(): [string, (value: string) => void] {
|
|||||||
return [value, setter];
|
return [value, setter];
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Header = (props: { title: string }) => {
|
const FrameworkSelector1 = () => {
|
||||||
return (
|
|
||||||
<header>
|
|
||||||
<h1>{props.title}</h1>
|
|
||||||
<FrameworkSelector />
|
|
||||||
</header>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const FrameworkSelector = () => {
|
|
||||||
const [activeFramework, setActiveFramework] = useActiveFramework();
|
const [activeFramework, setActiveFramework] = useActiveFramework();
|
||||||
|
|
||||||
const onChange = (event: React.ChangeEvent<HTMLSelectElement>) => [
|
const onChange = (event: React.ChangeEvent<HTMLSelectElement>) => [
|
||||||
@ -64,7 +56,11 @@ export const FrameworkSelector = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const FrameworkSpecific = (props: {
|
export const FrameworkSelector = () => {
|
||||||
|
return <BrowserOnly>{() => <FrameworkSelector1 />}</BrowserOnly>;
|
||||||
|
};
|
||||||
|
|
||||||
|
const FrameworkSpecific1 = (props: {
|
||||||
framework: string;
|
framework: string;
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}) => {
|
}) => {
|
||||||
@ -76,3 +72,10 @@ export const FrameworkSpecific = (props: {
|
|||||||
|
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const FrameworkSpecific = (props: {
|
||||||
|
framework: string;
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) => {
|
||||||
|
return <BrowserOnly>{() => <FrameworkSpecific1 {...props} />}</BrowserOnly>;
|
||||||
|
};
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { CodeSandboxButton } from './codeSandboxButton';
|
import { CodeSandboxButton } from './codeSandboxButton';
|
||||||
|
import BrowserOnly from '@docusaurus/BrowserOnly';
|
||||||
|
|
||||||
const ExampleFrame = (props: {
|
const ExampleFrame = (props: {
|
||||||
framework: string;
|
framework: string;
|
||||||
@ -19,34 +20,43 @@ const ExampleFrame = (props: {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<React.Suspense>
|
<BrowserOnly>
|
||||||
<div
|
{() => (
|
||||||
style={{
|
<React.Suspense>
|
||||||
display: 'flex',
|
<div
|
||||||
flexDirection: 'column',
|
style={{
|
||||||
flexGrow: 1,
|
display: 'flex',
|
||||||
}}
|
flexDirection: 'column',
|
||||||
>
|
flexGrow: 1,
|
||||||
<div
|
}}
|
||||||
style={{
|
>
|
||||||
height: props.height ?? '500px',
|
<div
|
||||||
flexGrow: 1,
|
style={{
|
||||||
display: 'flex',
|
height: props.height ?? '500px',
|
||||||
flexDirection: 'column',
|
flexGrow: 1,
|
||||||
}}
|
display: 'flex',
|
||||||
>
|
flexDirection: 'column',
|
||||||
<Component theme={props.theme} />
|
}}
|
||||||
</div>
|
>
|
||||||
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
<Component theme={props.theme} />
|
||||||
<span style={{ width: '220px' }}>
|
</div>
|
||||||
<CodeSandboxButton
|
<div
|
||||||
id={`${props.framework}/${props.id}`}
|
style={{
|
||||||
hideThemePicker={true}
|
display: 'flex',
|
||||||
/>
|
justifyContent: 'flex-end',
|
||||||
</span>
|
}}
|
||||||
</div>
|
>
|
||||||
</div>
|
<span style={{ width: '220px' }}>
|
||||||
</React.Suspense>
|
<CodeSandboxButton
|
||||||
|
id={`${props.framework}/${props.id}`}
|
||||||
|
hideThemePicker={true}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</React.Suspense>
|
||||||
|
)}
|
||||||
|
</BrowserOnly>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -4,9 +4,9 @@ import { themeConfig } from '../config/theme.config';
|
|||||||
import ExampleFrame from '../components/ui/exampleFrame';
|
import ExampleFrame from '../components/ui/exampleFrame';
|
||||||
|
|
||||||
export default function Popout() {
|
export default function Popout() {
|
||||||
const [theme, setTheme] = React.useState<string>(
|
// const [theme, setTheme] = React.useState<string>(
|
||||||
new URLSearchParams(location.search).get('theme') ?? themeConfig[3].id
|
// new URLSearchParams(location.search).get('theme') ?? themeConfig[3].id
|
||||||
);
|
// );
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout noFooter={true}>
|
<Layout noFooter={true}>
|
||||||
@ -32,7 +32,7 @@ export default function Popout() {
|
|||||||
url.searchParams.set('theme', event.target.value);
|
url.searchParams.set('theme', event.target.value);
|
||||||
window.location.href = url.toString();
|
window.location.href = url.toString();
|
||||||
}}
|
}}
|
||||||
value={theme}
|
// value={theme}
|
||||||
>
|
>
|
||||||
{themeConfig.map((theme) => {
|
{themeConfig.map((theme) => {
|
||||||
return <option>{theme.id}</option>;
|
return <option>{theme.id}</option>;
|
||||||
@ -41,7 +41,7 @@ export default function Popout() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ExampleFrame
|
<ExampleFrame
|
||||||
theme={theme}
|
// theme={theme}
|
||||||
framework="react"
|
framework="react"
|
||||||
height="100%"
|
height="100%"
|
||||||
id="dockview/demo-dockview"
|
id="dockview/demo-dockview"
|
||||||
|
@ -1 +0,0 @@
|
|||||||
[]
|
|
Loading…
Reference in New Issue
Block a user