rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-05-03 18:18:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: update readme

Browse Source
This commit is contained in:
mathuo 2022-03-14 21:56:18 +00:00
parent e21ca56092
commit ae15e4e897
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
2 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -99,6 +99,7 @@ const Component = () => {
event.api.addPanel({ event.api.addPanel({
id: 'panel1', id: 'panel1',
component: 'default', component: 'default',
tabComponent: 'customTab', // optional custom header
params: { params: {
someProps: 'Hello', someProps: 'Hello',
}, },
@ -116,7 +117,7 @@ const Component = () => {
return ( return (
<DockviewReact <DockviewReact
components={components} components={components}
tabComponents={headers} tabComponents={headers} // optional headers renderer
onReady={onReady} onReady={onReady}
/> />
); );
@ -131,13 +132,12 @@ const components: PanelCollection<IDockviewPanelProps> = {
return <div>{props.params.someProps}</div>; return <div>{props.params.someProps}</div>;
}, },
fancy: (props: IDockviewPanelProps) => { fancy: (props: IDockviewPanelProps) => {
const close = () => props.api.close();
return ( return (
<DockviewComponents.Panel> <DockviewComponents.Panel>
<DockviewComponents.Tab> <DockviewComponents.Tab>
<div> <div>
<span>{props.api.title}</span> <span>{props.api.title}</span>
<span onClick={close}>{'Close'}</span> <span onClick={() => props.api.close()}>{'Close'}</span>
</div> </div>
</DockviewComponents.Tab> </DockviewComponents.Tab>
<DockviewComponents.Content> <DockviewComponents.Content>

25
packages/dockview/README.md
View File

@ -69,16 +69,22 @@ You should also attach a dockview theme to an element containing your components
Demonstrated below is a high level example of a `DockviewReact` component. You can follow a similar pattern for `GridviewReact`, `SplitviewReact` and `PaneviewReact` components too, see examples for more. Demonstrated below is a high level example of a `DockviewReact` component. You can follow a similar pattern for `GridviewReact`, `SplitviewReact` and `PaneviewReact` components too, see examples for more.
```tsx ```tsx
import { DockviewReact, DockviewReadyEvent, PanelCollection.IDockviewPanelProps } from 'dockview'; import {
DockviewReact,
DockviewReadyEvent,
PanelCollection,
IDockviewPanelProps,
IDockviewPanelHeaderProps,
} from 'dockview';
const components: PanelCollection<IDockviewPanelProps> = { const components: PanelCollection<IDockviewPanelProps> = {
default: (props: IDockviewPanelProps<{someProps: string}>) => { default: (props: IDockviewPanelProps<{ someProps: string }>) => {
return <div>{props.params.someProps}</div> return <div>{props.params.someProps}</div>;
} },
}; };
const headers: PanelCollection<IDockviewPanelHeaderProps> = { const headers: PanelCollection<IDockviewPanelHeaderProps> = {
customHeader: (props) => { customTab: (props: IDockviewPanelHeaderProps) => {
return ( return (
<div> <div>
<span>{props.api.title}</span> <span>{props.api.title}</span>
@ -100,7 +106,6 @@ const Component = () => {
event.api.addPanel({ event.api.addPanel({
id: 'panel2', id: 'panel2',
component: 'default', component: 'default',
tabComponent: 'customHeader', // optional custom header
params: { params: {
someProps: 'World', someProps: 'World',
}, },
@ -108,7 +113,13 @@ const Component = () => {
}); });
}; };
return <DockviewReact components={components} tabComponents={headers} onReady={onReady} />; return (
<DockviewReact
components={components}
tabComponents={headers}
onReady={onReady}
/>
);
}; };
``` ```