mirror of
https://github.com/mathuo/dockview
synced 2025-02-19 14:45:44 +00:00
58 lines
1.5 KiB
Plaintext
58 lines
1.5 KiB
Plaintext
---
|
|
title: Get Started
|
|
sidebar_position: 0
|
|
---
|
|
|
|
import { MultiFrameworkContainer } from '@site/src/components/ui/container';
|
|
import { CodeRunner } from '@site/src/components/ui/codeRunner';
|
|
|
|
import DockviewExampleApp from '@site/sandboxes/example-app-dockview/src/app';
|
|
|
|
|
|
<MultiFrameworkContainer
|
|
sandboxId="example-app-dockview"
|
|
react={DockviewExampleApp}
|
|
/>
|
|
|
|
|
|
## Introduction
|
|
|
|
Dockview is an abstraction built on top of [Gridviews](./gridview) where each view is a container of many tabbed panels.
|
|
|
|
<CodeRunner id="dockview/basic"/>
|
|
|
|
<br />
|
|
|
|
> You can access the panels associated group through the `panel.group` variable.
|
|
> The group will always be defined and will change if a panel is moved into another group.
|
|
|
|
|
|
## Dockview API
|
|
|
|
The Dockview API is exposed both at the `onReady` event and on each panel through `props.containerApi`.
|
|
Through this API you can control general features of the component and access all added panels.
|
|
|
|
```tsx title="Dockview API via Panel component"
|
|
const MyComponent = (props: IDockviewPanelProps<{ title: string }>) => {
|
|
// props.containerApi...
|
|
|
|
return <div>{`My first panel has the title: ${props.params.title}`}</div>;
|
|
};
|
|
```
|
|
|
|
```tsx title="Dockview API via the onReady callback"
|
|
const onReady = (event: DockviewReadyEvent) => {
|
|
// event.api...
|
|
};
|
|
```
|
|
|
|
## Dockview Panel API
|
|
|
|
```tsx
|
|
const MyComponent = (props: IDockviewPanelProps<{ title: string }>) => {
|
|
// props.api...
|
|
|
|
return <div>{`My first panel has the title: ${props.params.title}`}</div>;
|
|
};
|
|
```
|