mirror of
https://github.com/mathuo/dockview
synced 2025-08-30 14:06:22 +00:00
chore: docs
This commit is contained in:
mathuo
parent
df52c808ab
commit
568731b723
25
README.md
25
README.md
@ -124,31 +124,6 @@ const Component = () => {
|
||||
};
|
||||
```
|
||||
|
||||
Specifically for `DockviewReact` there exists higher-order components to encapsulate both the tab and contents into one logical component for the user making state sharing between the two simple, which is an optional feature.
|
||||
|
||||
```tsx
|
||||
const components: PanelCollection<IDockviewPanelProps> = {
|
||||
default: (props: IDockviewPanelProps<{ someProps: string }>) => {
|
||||
return <div>{props.params.someProps}</div>;
|
||||
},
|
||||
fancy: (props: IDockviewPanelProps) => {
|
||||
return (
|
||||
<DockviewComponents.Panel>
|
||||
<DockviewComponents.Tab>
|
||||
<div>
|
||||
<span>{props.api.title}</span>
|
||||
<span onClick={() => props.api.close()}>{'Close'}</span>
|
||||
</div>
|
||||
</DockviewComponents.Tab>
|
||||
<DockviewComponents.Content>
|
||||
<div>{'Hello world'}</div>
|
||||
</DockviewComponents.Content>
|
||||
</DockviewComponents.Panel>
|
||||
);
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Sandbox examples
|
||||
|
||||
- [Dockview](https://codesandbox.io/s/simple-dockview-t6491)
|
||||
|
||||
@ -14,7 +14,7 @@ export const Container = (props: { children: React.ReactNode }) => {
|
||||
<Navigation pages={PAGES} />
|
||||
</div>
|
||||
<div
|
||||
style={{ flexGrow: 1, padding: '20px' }}
|
||||
style={{ flexGrow: 1, padding: '20px', maxWidth: '1440px' }}
|
||||
className="markdown-body"
|
||||
>
|
||||
{props.children}
|
||||
|
||||
@ -3,10 +3,59 @@ import {
|
||||
PaneviewReact,
|
||||
PaneviewReadyEvent,
|
||||
} from 'dockview';
|
||||
import * as React from 'react';
|
||||
|
||||
const components = {
|
||||
default: (props: IPaneviewPanelProps<{ title: string }>) => {
|
||||
return <div style={{ padding: '20px' }}>{props.params.title}</div>;
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
padding: '10px',
|
||||
height: '100%',
|
||||
backgroundColor: 'rgb(60,60,60)',
|
||||
}}
|
||||
>
|
||||
{props.params.title}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
const headerComponents = {
|
||||
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>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
@ -43,6 +92,7 @@ export const SimplePaneview = () => {
|
||||
return (
|
||||
<PaneviewReact
|
||||
components={components}
|
||||
headerComponents={headerComponents}
|
||||
onReady={onReady}
|
||||
className="dockview-theme-dark"
|
||||
/>
|
||||
|
||||
@ -39,6 +39,13 @@ export const SimpleSplitview = (props: { proportional?: boolean }) => {
|
||||
},
|
||||
minimumSize: 100,
|
||||
});
|
||||
|
||||
event.api.addPanel({
|
||||
id: 'panel_3',
|
||||
component: 'default',
|
||||
minimumSize: 100,
|
||||
maximumSize: 1000,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@ -80,6 +80,23 @@ You can disable this by settings the `disableAutoResizing` prop to be `true`.
|
||||
|
||||
You can manually resize a component using the API method `layout(width: number, height: number): void`.
|
||||
|
||||
## Events
|
||||
|
||||
Many API properties can be listened on using the `Event` pattern. For example `api.onDidFocusChange(() => {...})`.
|
||||
You should dispose of any event listeners you create cleaning up any listeners you would have created.
|
||||
|
||||
```tsx
|
||||
React.useEffect(() => {
|
||||
const disposable = api.onDidFocusChange(() => {
|
||||
// write some code
|
||||
});
|
||||
|
||||
return () => {
|
||||
disposable.dispose();
|
||||
};
|
||||
}, []);
|
||||
```
|
||||
|
||||
## Proportional layout
|
||||
|
||||
The `proportionalLayout` property indicates the expected behaviour of the component as it's container resizes, should all views resize equally or should just one view expand to fill the new space. `proportionalLayout` can be set as a property on `SplitviewReact` and `GridviewReact` components.
|
||||
@ -88,3 +105,7 @@ Although not configurable on `DockviewReact` and `PaneviewReact` these both beha
|
||||
<SimpleSplitview2 proportional={false} />
|
||||
|
||||
<SimpleSplitview2 proportional={true} />
|
||||
|
||||
## Browser support
|
||||
|
||||
dockview is intended to support all major browsers
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { SimpleDockview } from '../components/simpleDockview';
|
||||
import Link from 'next/link';
|
||||
|
||||
Dockview is an abstraction built on top of [Gridviews](/gridview) where each view is a tabbed container.
|
||||
|
||||
@ -44,18 +45,18 @@ panel.group.header.hidden = true;
|
||||
import { ReactDockview } from 'dockview';
|
||||
```
|
||||
|
||||
| Property | Type | Optional | Default | Description |
|
||||
| ------------------- | ------------------------------------ | -------- | ------- | ------------------------------------------- |
|
||||
| onReady | (event: SplitviewReadyEvent) => void | No | | |
|
||||
| components | object | No | | |
|
||||
| tabComponents | object | Yes | | |
|
||||
| watermarkComponent | object | Yes | | |
|
||||
| hideBorders | boolean | Yes | false | |
|
||||
| className | string | Yes | '' | |
|
||||
| disableAutoResizing | boolean | Yes | false | See [Auto resizing](/basics/#auto-resizing) |
|
||||
| onTabContextMenu | Event | Yes | false | |
|
||||
| onDidDrop | Event | Yes | false | |
|
||||
| showDndOverlay | Event | Yes | false | |
|
||||
| Property | Type | Optional | Default | Description |
|
||||
| ------------------- | ------------------------------------ | -------- | ------- | ------------------------------------------------------------ |
|
||||
| onReady | (event: SplitviewReadyEvent) => void | No | | |
|
||||
| components | object | No | | |
|
||||
| tabComponents | object | Yes | | |
|
||||
| watermarkComponent | object | Yes | | |
|
||||
| hideBorders | boolean | Yes | false | |
|
||||
| className | string | Yes | '' | |
|
||||
| disableAutoResizing | boolean | Yes | false | See <Link href="/basics/#auto-resizing">Auto Resizing</Link> |
|
||||
| onTabContextMenu | Event | Yes | false | |
|
||||
| onDidDrop | Event | Yes | false | |
|
||||
| showDndOverlay | Event | Yes | false | |
|
||||
|
||||
## Dockview API
|
||||
|
||||
@ -73,45 +74,45 @@ const onReady = (event: DockviewReadyEvent) => {
|
||||
};
|
||||
```
|
||||
|
||||
| Property | Type | Description |
|
||||
| ---------------------- | ---------------------------------------------------- | ------------------------------------------- |
|
||||
| height | `number` | Component pixel height |
|
||||
| width | `number` | Component pixel width |
|
||||
| minimumHeight | `number` | |
|
||||
| maximumHeight | `number` | |
|
||||
| maximumWidth | `number` | |
|
||||
| maximumWidth | `number` | |
|
||||
| length | `number` | Number of panels |
|
||||
| size | `number` | Number of Groups |
|
||||
| panels | `IDockviewPanel[]` | |
|
||||
| groups | `GroupPanel[]` | |
|
||||
| activePanel | `IDockviewPanel \| undefined` | |
|
||||
| activeGroup | `IDockviewPanel \| undefined` | |
|
||||
| | | |
|
||||
| onDidLayoutChange | `Event<void>` | |
|
||||
| onDidLayoutFromJSON | `Event<void>` | |
|
||||
| onDidAddGroup | `Event<GroupPanel>` | |
|
||||
| onDidRemoveGroup | `Event<GroupPanel>` | |
|
||||
| onDidActiveGroupChange | `Event<GroupPanel \| undefined>` | |
|
||||
| onDidAddPanel | `Event<IDockviewPanel>` | |
|
||||
| onDidRemovePanel | `Event<IDockviewPanel>` | |
|
||||
| onDidActivePanelChange | `Event<IDockviewPanel \| undefined>` | |
|
||||
| onDidDrop | `Event<DockviewDropEvent` | |
|
||||
| | | |
|
||||
| addPanel | `addPanel(options: AddPanelOptions): IDockviewPanel` | |
|
||||
| getPanel | `(id: string) \| IDockviewPanel \| undefined` | |
|
||||
| addEmptyGroup | `(options? AddGroupOptions): void` | |
|
||||
| closeAllGroups | `(): void` | |
|
||||
| removeGroup | `(group: GroupPanel): void` | |
|
||||
| getGroup | `(id: string): GroupPanel \| undefined` | |
|
||||
| | | |
|
||||
| getTabHeight | `(): number \| undefined` | |
|
||||
| setTabHeight | `(hegiht: number \| undefined): void` | |
|
||||
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
|
||||
| focus | `(): void` | |
|
||||
| layout | `(width: number, height:number): void` | See [Auto resizing](/basics/#auto-resizing) |
|
||||
| fromJSON | `(data: SerializedDockview): void` | See [Serialization](/basics/#serialization) |
|
||||
| toJSON | `(): SerializedDockview` | See [Serialization](/basics/#serialization) |
|
||||
| Property | Type | Description |
|
||||
| ---------------------- | ---------------------------------------------------- | -------------------------------------------------------- |
|
||||
| height | `number` | Component pixel height |
|
||||
| width | `number` | Component pixel width |
|
||||
| minimumHeight | `number` | |
|
||||
| maximumHeight | `number` | |
|
||||
| maximumWidth | `number` | |
|
||||
| maximumWidth | `number` | |
|
||||
| length | `number` | Number of panels |
|
||||
| size | `number` | Number of Groups |
|
||||
| panels | `IDockviewPanel[]` | |
|
||||
| groups | `GroupPanel[]` | |
|
||||
| activePanel | `IDockviewPanel \| undefined` | |
|
||||
| activeGroup | `IDockviewPanel \| undefined` | |
|
||||
| | | |
|
||||
| onDidLayoutChange | `Event<void>` | |
|
||||
| onDidLayoutFromJSON | `Event<void>` | |
|
||||
| onDidAddGroup | `Event<GroupPanel>` | |
|
||||
| onDidRemoveGroup | `Event<GroupPanel>` | |
|
||||
| onDidActiveGroupChange | `Event<GroupPanel \| undefined>` | |
|
||||
| onDidAddPanel | `Event<IDockviewPanel>` | |
|
||||
| onDidRemovePanel | `Event<IDockviewPanel>` | |
|
||||
| onDidActivePanelChange | `Event<IDockviewPanel \| undefined>` | |
|
||||
| onDidDrop | `Event<DockviewDropEvent` | |
|
||||
| | | |
|
||||
| addPanel | `addPanel(options: AddPanelOptions): IDockviewPanel` | |
|
||||
| getPanel | `(id: string) \| IDockviewPanel \| undefined` | |
|
||||
| addEmptyGroup | `(options? AddGroupOptions): void` | |
|
||||
| closeAllGroups | `(): void` | |
|
||||
| removeGroup | `(group: GroupPanel): void` | |
|
||||
| getGroup | `(id: string): GroupPanel \| undefined` | |
|
||||
| | | |
|
||||
| getTabHeight | `(): number \| undefined` | |
|
||||
| setTabHeight | `(hegiht: number \| undefined): void` | |
|
||||
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
|
||||
| focus | `(): void` | |
|
||||
| layout | `(width: number, height:number): void` | <Link href="/basics/#auto-resizing">Auto Resizing</Link> |
|
||||
| fromJSON | `(data: SerializedDockview): void` | <Link href="/basics/#serialization">Serialization</Link> |
|
||||
| toJSON | `(): SerializedDockview` | <Link href="/basics/#serialization">Serialization</Link> |
|
||||
|
||||
## Dockview Panel API
|
||||
|
||||
@ -134,7 +135,6 @@ const MyComponent = (props: IDockviewPanelProps<{ title: string }>) => {
|
||||
| onDidFocusChange | `Event<FocusEvent>` | |
|
||||
| onDidVisibilityChange | `Event<VisibilityEvent>` | |
|
||||
| onDidActiveChange | `Event<ActiveEvent>` | |
|
||||
| onFocusEvent | `Event<void>` | |
|
||||
| setActive | `(): void` | |
|
||||
| | | |
|
||||
| onDidConstraintsChange | `onDidConstraintsChange: Event<PanelConstraintChangeEvent>` | |
|
||||
|
||||
@ -1,18 +1,32 @@
|
||||
import { SimpleGridview } from '../components/simpleGridview';
|
||||
import Link from 'next/link
|
||||
|
||||
<div
|
||||
style={{
|
||||
height: '300px',
|
||||
backgroundColor: 'rgb(30,30,30)',
|
||||
color: 'white',
|
||||
margin: '20px 0px',
|
||||
}}
|
||||
>
|
||||
<SimpleGridview />
|
||||
</div>
|
||||
|
||||
## Component Props
|
||||
|
||||
```tsx
|
||||
import { ReactGridview } from 'dockview';
|
||||
```
|
||||
|
||||
| Property | Type | Optional | Default | Description |
|
||||
| ------------------- | ------------------------------------ | -------- | ---------------------- | ------------------------------------------- |
|
||||
| onReady | (event: SplitviewReadyEvent) => void | No | | |
|
||||
| components | object | No | | |
|
||||
| orientation | Orientation | Yes | Orientation.HORIZONTAL | |
|
||||
| proportionalLayout | boolean | Yes | true | |
|
||||
| hideBorders | boolean | Yes | false | |
|
||||
| className | string | Yes | '' | |
|
||||
| disableAutoResizing | boolean | Yes | false | See [Auto resizing](/basics/#auto-resizing) |
|
||||
| Property | Type | Optional | Default | Description |
|
||||
| ------------------- | ------------------------------------ | -------- | ---------------------- | ------------------------------------------------------------------------ |
|
||||
| onReady | (event: SplitviewReadyEvent) => void | No | | |
|
||||
| components | object | No | | |
|
||||
| orientation | Orientation | Yes | Orientation.HORIZONTAL | |
|
||||
| proportionalLayout | boolean | Yes | true | See <Link href="/basics/#proportional-layout">Proportional layout</Link> |
|
||||
| hideBorders | boolean | Yes | false | |
|
||||
| className | string | Yes | '' | |
|
||||
| disableAutoResizing | boolean | Yes | false | See <Link href="/basics/#auto-resizing">Auto Resizing</Link> |
|
||||
|
||||
## Gridview API
|
||||
|
||||
@ -30,37 +44,34 @@ const onReady = (event: GridviewReadyEvent) => {
|
||||
};
|
||||
```
|
||||
|
||||
| Property | Type | Description |
|
||||
| ---------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------- |
|
||||
| height | `number` | Component pixel height |
|
||||
| width | `number` | Component pixel width |
|
||||
| minimumHeight | `number` | |
|
||||
| maximumHeight | `number` | |
|
||||
| maximumWidth | `number` | |
|
||||
| maximumWidth | `number` | |
|
||||
| length | `number` | Number of panels |
|
||||
| panels | `ISplitviewPanel[]` | |
|
||||
| orientation | `Orientation` | |
|
||||
| | | |
|
||||
| onDidLayoutChange | `Event<void>` | |
|
||||
| onDidLayoutFromJSON | `Event<void>` | |
|
||||
| onDidAddGroup | `Event<IGridviewPanel>` | |
|
||||
| onDidRemoveGroup | `Event<IGridviewPanel>` | |
|
||||
| onDidActiveGroupChange | `Event<IGridviewPanel \| undefined>` | |
|
||||
| | | |
|
||||
| addPanel | `addPanel(options: AddComponentOptions): IGridviewPanel` | |
|
||||
| removePanel | `(panel: IGridviewPanel, sizing?: Sizing): void` | |
|
||||
| movePanel | `(panel: IGridviewPanel, options: {direction: Direction, refernece:string, size?: number}): void` | |
|
||||
| getPanel | `(id: string) \| IGridviewPanel \| undefined` | |
|
||||
| | | |
|
||||
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
|
||||
| setVisible | `(panel: IGridviewPanel, isVisible: boolean): void` | |
|
||||
| focus | `(): void` | |
|
||||
| setActive | `(panel: IGridviewPanel): void` | |
|
||||
| toggleVisiblity | `(panel: IGridviewPanel): void` | |
|
||||
| layout | `(width: number, height:number): void` | See [Auto resizing](/basics/#auto-resizing) |
|
||||
| fromJSON | `(data: SerializedGridview): void` | See [Serialization](/basics/#serialization) |
|
||||
| toJSON | `(): SerializedGridview` | See [Serialization](/basics/#serialization) |
|
||||
| Property | Type | Description |
|
||||
| ---------------------- | ------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
|
||||
| height | `number` | Component pixel height |
|
||||
| width | `number` | Component pixel width |
|
||||
| minimumHeight | `number` | |
|
||||
| maximumHeight | `number` | |
|
||||
| maximumWidth | `number` | |
|
||||
| maximumWidth | `number` | |
|
||||
| length | `number` | Number of panels |
|
||||
| panels | `ISplitviewPanel[]` | |
|
||||
| orientation | `Orientation` | |
|
||||
| | | |
|
||||
| onDidLayoutChange | `Event<void>` | |
|
||||
| onDidLayoutFromJSON | `Event<void>` | |
|
||||
| onDidAddGroup | `Event<IGridviewPanel>` | |
|
||||
| onDidRemoveGroup | `Event<IGridviewPanel>` | |
|
||||
| onDidActiveGroupChange | `Event<IGridviewPanel \| undefined>` | |
|
||||
| | | |
|
||||
| addPanel | `addPanel(options: AddComponentOptions): IGridviewPanel` | |
|
||||
| removePanel | `(panel: IGridviewPanel, sizing?: Sizing): void` | |
|
||||
| movePanel | `(panel: IGridviewPanel, options: {direction: Direction, refernece:string, size?: number}): void` | |
|
||||
| getPanel | `(id: string) \| IGridviewPanel \| undefined` | |
|
||||
| | | |
|
||||
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
|
||||
| focus | `(): void` | |
|
||||
| layout | `(width: number, height:number): void` | <Link href="/basics/#auto-resizing">Auto Resizing</Link> |
|
||||
| fromJSON | `(data: SerializedGridview): void` | <Link href="/basics/#serialization">Serialization</Link> |
|
||||
| toJSON | `(): SerializedGridview` | <Link href="/basics/#serialization">Serialization</Link> |
|
||||
|
||||
## Gridview Panel API
|
||||
|
||||
@ -85,7 +96,6 @@ const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => {
|
||||
| onDidFocusChange | `Event<FocusEvent>` | |
|
||||
| onDidVisibilityChange | `Event<VisibilityEvent>` | |
|
||||
| onDidActiveChange | `Event<ActiveEvent>` | |
|
||||
| onFocusEvent | `Event<void>` | |
|
||||
| onDidConstraintsChange | `onDidConstraintsChange: Event<PanelConstraintChangeEvent>` | |
|
||||
| | | |
|
||||
| setVisible | `(isVisible: boolean): void` | |
|
||||
|
||||
@ -1,20 +1,93 @@
|
||||
import { SimplePaneview } from '../components/simplePaneview';
|
||||
import Link from 'next/link';
|
||||
|
||||
<div
|
||||
style={{
|
||||
height: '400px',
|
||||
backgroundColor: 'rgb(30,30,30)',
|
||||
color: 'white',
|
||||
margin: '20px 0px',
|
||||
}}
|
||||
>
|
||||
<SimplePaneview />
|
||||
</div>
|
||||
|
||||
## Component Props
|
||||
|
||||
```tsx
|
||||
import { ReactPaneview } from 'dockview';
|
||||
```
|
||||
|
||||
| Property | Type | Optional | Default | Description |
|
||||
| ------------------- | ------------------------------------ | -------- | ------- | ------------------------------------------- |
|
||||
| onReady | (event: SplitviewReadyEvent) => void | No | | |
|
||||
| components | object | No | | |
|
||||
| headerComponents | object | Yes | | |
|
||||
| className | string | Yes | '' | |
|
||||
| disableAutoResizing | boolean | Yes | false | See [Auto resizing](/basics/#auto-resizing) |
|
||||
| disableDnd | boolean | Yes | false | |
|
||||
| onDidDrop | Event | Yes | | |
|
||||
| Property | Type | Optional | Default | Description |
|
||||
| ------------------- | ------------------------------------ | -------- | ------- | -------------------------------------------------------- |
|
||||
| onReady | (event: SplitviewReadyEvent) => void | No | | |
|
||||
| components | object | No | | |
|
||||
| headerComponents | object | Yes | | |
|
||||
| className | string | Yes | '' | |
|
||||
| disableAutoResizing | boolean | Yes | false | <Link href="/basics/#auto-resizing">Auto Resizing</Link> |
|
||||
| disableDnd | boolean | Yes | false | |
|
||||
| onDidDrop | Event | Yes | | |
|
||||
|
||||
## Gridview API
|
||||
## Custom Header
|
||||
|
||||
The above example shows the default header and will render the `title` along with a small icon to indicate a collapsed or expanded state.
|
||||
You can provide a custom header:
|
||||
|
||||
```tsx
|
||||
const onReady = (event: PaneviewReadyEvent) => {
|
||||
event.api.addPanel({
|
||||
id: 'panel_1',
|
||||
component: 'default',
|
||||
headerComponent: 'myHeaderComponent',
|
||||
params: {
|
||||
valueA: 'A',
|
||||
},
|
||||
title: 'Panel 1',
|
||||
});
|
||||
};
|
||||
```
|
||||
|
||||
You can define a header component and listen to the expanded state to update the component accordingly.
|
||||
|
||||
```tsx
|
||||
const CustomHeader = (props: IPaneviewPanelProps) => {
|
||||
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>
|
||||
<a
|
||||
onClick={onClick}
|
||||
className={expanded ? 'expanded' : 'collapsed'}
|
||||
/>
|
||||
<span>{props.params.title}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
You should provide a value for the `headerComponents` React prop.
|
||||
|
||||
```tsx
|
||||
const headerComponents = { myHeaderComponent: CustomHeader };
|
||||
```
|
||||
|
||||
## Paneview API
|
||||
|
||||
```tsx
|
||||
const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => {
|
||||
@ -30,30 +103,30 @@ const onReady = (event: GridviewReadyEvent) => {
|
||||
};
|
||||
```
|
||||
|
||||
| Property | Type | Description |
|
||||
| ------------------- | ---------------------------------------------------------------- | ------------------------------------------- |
|
||||
| height | `number` | Component pixel height |
|
||||
| width | `number` | Component pixel width |
|
||||
| minimumSize | `number` | |
|
||||
| maximumSize | `number` | |
|
||||
| length | `number` | Number of panels |
|
||||
| panels | `IPaneviewPanel[]` | |
|
||||
| | | |
|
||||
| onDidLayoutChange | `Event<void>` | |
|
||||
| onDidLayoutFromJSON | `Event<void>` | |
|
||||
| onDidAddView | `Event<IPaneviewPanel>` | |
|
||||
| onDidRemoveView | `Event<IPaneviewPanel>` | |
|
||||
| onDidDrop | `Event<PaneviewDropEvent` | |
|
||||
| | | |
|
||||
| addPanel | `addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel` | |
|
||||
| removePanel | `(panel: IPaneviewPanel): void` | |
|
||||
| movePanel | `(from: number, to: number): void` | |
|
||||
| getPanel | `(id:string): IPaneviewPanel \| undefined` | |
|
||||
| | | |
|
||||
| focus | `(): void` | |
|
||||
| layout | `(width: number, height:number): void` | See [Auto resizing](/basics/#auto-resizing) |
|
||||
| fromJSON | `(data: SerializedPaneview): void` | See [Serialization](/basics/#serialization) |
|
||||
| toJSON | `(): SerializedPaneview` | See [Serialization](/basics/#serialization) |
|
||||
| Property | Type | Description |
|
||||
| ------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------ |
|
||||
| height | `number` | Component pixel height |
|
||||
| width | `number` | Component pixel width |
|
||||
| minimumSize | `number` | |
|
||||
| maximumSize | `number` | |
|
||||
| length | `number` | Number of panels |
|
||||
| panels | `IPaneviewPanel[]` | |
|
||||
| | | |
|
||||
| onDidLayoutChange | `Event<void>` | |
|
||||
| onDidLayoutFromJSON | `Event<void>` | |
|
||||
| onDidAddView | `Event<IPaneviewPanel>` | |
|
||||
| onDidRemoveView | `Event<IPaneviewPanel>` | |
|
||||
| onDidDrop | `Event<PaneviewDropEvent` | |
|
||||
| | | |
|
||||
| addPanel | `addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel` | |
|
||||
| removePanel | `(panel: IPaneviewPanel): void` | |
|
||||
| movePanel | `(from: number, to: number): void` | |
|
||||
| getPanel | `(id:string): IPaneviewPanel \| undefined` | |
|
||||
| | | |
|
||||
| focus | `(): void` | |
|
||||
| layout | `(width: number, height:number): void` | See <Link href="/basics/#auto-resizing">Auto Resizing</Link> |
|
||||
| fromJSON | `(data: SerializedPaneview): void` | <Link href="/basics/#serialization">Serialization</Link> |
|
||||
| toJSON | `(): SerializedPaneview` | <Link href="/basics/#serialization">Serialization</Link> |
|
||||
|
||||
## Gridview Panel API
|
||||
|
||||
@ -78,7 +151,6 @@ const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => {
|
||||
| onDidFocusChange | `Event<FocusEvent>` | |
|
||||
| onDidVisibilityChange | `Event<VisibilityEvent>` | |
|
||||
| onDidActiveChange | `Event<ActiveEvent>` | |
|
||||
| onFocusEvent | `Event<void>` | |
|
||||
| onDidConstraintsChange | `onDidConstraintsChange: Event<PanelConstraintChangeEvent>` | |
|
||||
| | |
|
||||
| setVisible | `(isVisible: boolean): void` | |
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { SimpleSplitview } from '../components/simpleSplitview';
|
||||
import Link from 'next/link';
|
||||
|
||||
# Splitview
|
||||
|
||||
@ -73,15 +74,15 @@ import { ReactSplitview } from 'dockview';
|
||||
|
||||
The `onReady` prop you will you access to the component `api`.
|
||||
|
||||
| Property | Type | Optional | Default | Description |
|
||||
| ------------------- | -------------------------------------- | -------- | ------------------------ | ------------------------------------------------------- |
|
||||
| onReady | `(event: SplitviewReadyEvent) => void` | No | | |
|
||||
| components | `Record<string, ISplitviewPanelProps>` | No | | Panel renderers |
|
||||
| orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview |
|
||||
| proportionalLayout | `boolean` | Yes | `true` | See [Proportional layout](/basics/#proportional-layout) |
|
||||
| hideBorders | `boolean` | Yes | `false` | Hide the borders between panels |
|
||||
| className | `string` | Yes | `''` | Attaches a classname |
|
||||
| disableAutoResizing | `boolean` | Yes | `false` | See [Auto resizing](/basics/#auto-resizing) |
|
||||
| Property | Type | Optional | Default | Description |
|
||||
| ------------------- | -------------------------------------- | -------- | ------------------------ | ------------------------------------------------------------------------ |
|
||||
| onReady | `(event: SplitviewReadyEvent) => void` | No | | |
|
||||
| components | `Record<string, ISplitviewPanelProps>` | No | | Panel renderers |
|
||||
| orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview |
|
||||
| proportionalLayout | `boolean` | Yes | `true` | See <Link href="/basics/#proportional-layout">Proportional layout</Link> |
|
||||
| hideBorders | `boolean` | Yes | `false` | Hide the borders between panels |
|
||||
| className | `string` | Yes | `''` | Attaches a classname |
|
||||
| disableAutoResizing | `boolean` | Yes | `false` | See <Link href="/basics/#auto-resizing">Auto Resizing</Link> |
|
||||
|
||||
## Splitview API
|
||||
|
||||
@ -99,32 +100,30 @@ const onReady = (event: SplitviewReadyEvent) => {
|
||||
};
|
||||
```
|
||||
|
||||
| Property | Type | Description |
|
||||
| ------------------- | ------------------------------------------------------------------ | ------------------------------------------- |
|
||||
| height | `number` | Component pixel height |
|
||||
| width | `number` | Component pixel width |
|
||||
| minimumSize | `number` | |
|
||||
| maximumSize | `number` | |
|
||||
| length | `number` | Number of panels |
|
||||
| panels | `ISplitviewPanel[]` | |
|
||||
| | | |
|
||||
| onDidLayoutChange | `Event<void>` | |
|
||||
| onDidLayoutFromJSON | `Event<void>` | |
|
||||
| onDidAddView | `Event<IView>` | |
|
||||
| onDidRemoveView | `Event<IView>` | |
|
||||
| | | |
|
||||
| addPanel | `addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel` | |
|
||||
| removePanel | `(panel: ISplitviewPanel, sizing?: Sizing): void` | |
|
||||
| getPanel | `(id:string): ISplitviewPanel \| undefined` | |
|
||||
| movePanel | `(from: number, to: number): void` | |
|
||||
| Property | Type | Description |
|
||||
| ------------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------- |
|
||||
| height | `number` | Component pixel height |
|
||||
| width | `number` | Component pixel width |
|
||||
| minimumSize | `number` | The sum of the `minimumSize` property for each panel |
|
||||
| maximumSize | `number` | The sum of the `maximumSize` property for each panel |
|
||||
| length | `number` | Number of panels |
|
||||
| panels | `ISplitviewPanel[]` | |
|
||||
| | | |
|
||||
| onDidLayoutChange | `Event<void>` | Fires on layout change |
|
||||
| onDidLayoutFromJSON | `Event<void>` | Fires of layout change caused by a fromJSON deserialization call |
|
||||
| onDidAddView | `Event<IView>` | Fires when a view is added |
|
||||
| onDidRemoveView | `Event<IView>` | Fires when a view is removed |
|
||||
| | | |
|
||||
| addPanel | `addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel` | |
|
||||
| removePanel | `(panel: ISplitviewPanel, sizing?: Sizing): void` | |
|
||||
| getPanel | `(id:string): ISplitviewPanel \| undefined` | |
|
||||
| movePanel | `(from: number, to: number): void` | |
|
||||
| | |
|
||||
| setVisible | `(panel: ISplitviewPanel, isVisible: boolean): void` | |
|
||||
| setActive | `(panel: ISplitviewPanel): void` | |
|
||||
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
|
||||
| focus | `(): void` | |
|
||||
| layout | `(width: number, height:number): void` | See [Auto resizing](/basics/#auto-resizing) |
|
||||
| fromJSON | `(data: SerializedSplitview): void` | See [Serialization](/basics/#serialization) |
|
||||
| toJSON | `(): SerializedSplitview` | See [Serialization](/basics/#serialization) |
|
||||
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
|
||||
| focus | `(): void` | |
|
||||
| layout | `(width: number, height:number): void` | See <Link href="/basics/#auto-resizing">Auto Resizing</Link> |
|
||||
| fromJSON | `(data: SerializedSplitview): void` | <Link href="/basics/#serialization">Serialization</Link> |
|
||||
| toJSON | `(): SerializedSplitview` | <Link href="/basics/#serialization">Serialization</Link> |
|
||||
|
||||
## Splitview Panel API
|
||||
|
||||
@ -136,24 +135,79 @@ const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
|
||||
};
|
||||
```
|
||||
|
||||
| Property | Type | Description |
|
||||
| ---------------------- | ----------------------------------------------------------- | ---------------- |
|
||||
| id | `string` | Panel id |
|
||||
| isFocused | `boolean` | Is panel focsed |
|
||||
| isActive | `boolean` | Is panel active |
|
||||
| isVisible | `boolean` | Is panel visible |
|
||||
| width | `number` | Panel width |
|
||||
| height | `number` | Panel height |
|
||||
| | |
|
||||
| onDidDimensionsChange | `Event<PanelDimensionChangeEvent>` | |
|
||||
| onDidFocusChange | `Event<FocusEvent>` | |
|
||||
| onDidVisibilityChange | `Event<VisibilityEvent>` | |
|
||||
| onDidActiveChange | `Event<ActiveEvent>` | |
|
||||
| onFocusEvent | `Event<void>` | |
|
||||
| onDidConstraintsChange | `onDidConstraintsChange: Event<PanelConstraintChangeEvent>` | |
|
||||
| | | |
|
||||
| setVisible | `(isVisible: boolean): void` | |
|
||||
| setActive | `(): void` | |
|
||||
| | | |
|
||||
| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
|
||||
| setSize | `(event: PanelSizeEvent): void` | |
|
||||
| Property | Type | Description |
|
||||
| ---------------------- | ----------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
||||
| id | `string` | Panel id |
|
||||
| isFocused | `boolean` | Is panel focsed |
|
||||
| isActive | `boolean` | Is panel active |
|
||||
| isVisible | `boolean` | Is panel visible |
|
||||
| width | `number` | Panel width |
|
||||
| height | `number` | Panel height |
|
||||
| | | |
|
||||
| onDidDimensionsChange | `Event<PanelDimensionChangeEvent>` | Fires when panel dimensions change |
|
||||
| onDidFocusChange | `Event<FocusEvent>` | Fire when panel is focused and blurred |
|
||||
| onDidVisibilityChange | `Event<VisibilityEvent>` | Fires when the panels visiblity property is changed (see <Link href="/splitview/#visibility">Panel Visibility</Link>) |
|
||||
| onDidActiveChange | `Event<ActiveEvent>` | Fires when the panels active property is changed (see <Link href="/splitview/#active">Active Panel</Link>) |
|
||||
| onDidConstraintsChange | `onDidConstraintsChange: Event<PanelConstraintChangeEvent>` | Fires when the panels size contrainsts change (see <Link href="/splitview/#contraints">Panel Constraints</Link>) |
|
||||
| | | |
|
||||
| setVisible | `(isVisible: boolean): void` | |
|
||||
| setActive | `(): void` | |
|
||||
| | | |
|
||||
| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
|
||||
| setSize | `(event: PanelSizeEvent): void` | |
|
||||
|
||||
# Visibility
|
||||
|
||||
```tsx
|
||||
const disposable = props.api.onDidVisibilityChange(({ isVisible }) => {
|
||||
//
|
||||
});
|
||||
```
|
||||
|
||||
```tsx
|
||||
api.setVisible(true);
|
||||
```
|
||||
|
||||
# Active
|
||||
|
||||
Only one panel in the `splitview` can be the active panel at any one time.
|
||||
Setting a panel as active will set all the others as inactive.
|
||||
A focused panel is always the active panel but an active panel is not always focused.
|
||||
|
||||
```tsx
|
||||
const disposable = props.api.onDidActiveChange(({ isActive }) => {
|
||||
//
|
||||
});
|
||||
```
|
||||
|
||||
```tsx
|
||||
api.setActive();
|
||||
```
|
||||
|
||||
# Contraints
|
||||
|
||||
When adding a panel you can specify pixel size contraints
|
||||
|
||||
```tsx
|
||||
event.api.addPanel({
|
||||
id: 'panel_3',
|
||||
component: 'default',
|
||||
minimumSize: 100,
|
||||
maximumSize: 1000,
|
||||
});
|
||||
```
|
||||
|
||||
These contraints can be updated throughout the lifecycle of the `splitview` using the panel API
|
||||
|
||||
```tsx
|
||||
props.api.onDidConstraintsChange(({ maximumSize, minimumSize }) => {
|
||||
//
|
||||
});
|
||||
```
|
||||
|
||||
```tsx
|
||||
api.setConstraints({
|
||||
maximumSize: 200,
|
||||
minimumSize: 400,
|
||||
});
|
||||
```
|
||||
|
||||
@ -124,31 +124,6 @@ const Component = () => {
|
||||
};
|
||||
```
|
||||
|
||||
Specifically for `DockviewReact` there exists higher-order components to encapsulate both the tab and contents into one logical component for the user making state sharing between the two simple, which is an optional feature.
|
||||
|
||||
```tsx
|
||||
const components: PanelCollection<IDockviewPanelProps> = {
|
||||
default: (props: IDockviewPanelProps<{ someProps: string }>) => {
|
||||
return <div>{props.params.someProps}</div>;
|
||||
},
|
||||
fancy: (props: IDockviewPanelProps) => {
|
||||
return (
|
||||
<DockviewComponents.Panel>
|
||||
<DockviewComponents.Tab>
|
||||
<div>
|
||||
<span>{props.api.title}</span>
|
||||
<span onClick={() => props.api.close()}>{'Close'}</span>
|
||||
</div>
|
||||
</DockviewComponents.Tab>
|
||||
<DockviewComponents.Content>
|
||||
<div>{'Hello world'}</div>
|
||||
</DockviewComponents.Content>
|
||||
</DockviewComponents.Panel>
|
||||
);
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Sandbox examples
|
||||
|
||||
- [Dockview](https://codesandbox.io/s/simple-dockview-t6491)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user