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

chore: update readme

Browse Source
This commit is contained in:
mathuo 2022-02-22 22:03:49 +00:00
parent c9eb954de8
commit 38fa8f2f6e
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
2 changed files with 70 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
README.md
View File

@ -39,6 +39,7 @@ Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@l
- [Quick start](#quick-start)
- [Sandbox examples](#sandbox-examples)
- [Serializated layouts](#serializated-layouts)
- [Drag and drop](#drag-and-drop)
- [Theming](#theming)
- [Performance](#performance)
- [FAQ](#faq)
@ -138,6 +139,40 @@ All view components support the methods `toJSON()`, `fromJSON(...)` and `onDidLa
See example [here](https://codesandbox.io/s/workspace-saving-example-euo5d).
## Drag and drop
Both `DockviewReact` and `PaneviewReact` support drag and drop functionality out of the box.
- `DockviewReact` allows tabs to be repositioned using drag and drop.
- `PaneviewReact` allows the repositioning of views using drag and drop on the header section.
You can use the utility methods `getPaneData` and `getPanelData` to manually extract the data transfer metadata associated with an active drag and drop event for either of the above components.
```tsx
import {
getPaneData,
getPanelData,
PanelTransfer,
PaneTransfer,
} from 'dockview';
const panelData: PanelTransfer | undefined = getPanelData();
if (panelData) {
// DockviewReact: data transfer metadata associated with the active drag and drop event
const { viewId, groupId, panelId } = panelData; // deconstructed object
}
const paneData: PaneTransfer | undefined = getPanelData();
if (paneData) {
// PaneviewReact: data transfer metadata associated with the active drag and drop event
const { viewId, paneId } = paneData; // deconstructed object
}
```
You can also intercept custom drag and drop events allowing dockview components to interact with and react to external drag events. `PaneviewReact` supports the method `onDidDrop` and `DockviewReact` supports the methods `onDidDrop` and `showDndOverlay`.
## Theming
The theme can be customized using the below set of CSS properties. You can find the built in themes [here](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/theme.scss) which could be used as an example to extend upon or build your own theme.

35
packages/dockview/README.md
View File

@ -39,6 +39,7 @@ Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@l
- [Quick start](#quick-start)
- [Sandbox examples](#sandbox-examples)
- [Serializated layouts](#serializated-layouts)
- [Drag and drop](#drag-and-drop)
- [Theming](#theming)
- [Performance](#performance)
- [FAQ](#faq)
@ -138,6 +139,40 @@ All view components support the methods `toJSON()`, `fromJSON(...)` and `onDidLa
See example [here](https://codesandbox.io/s/workspace-saving-example-euo5d).
## Drag and drop
Both `DockviewReact` and `PaneviewReact` support drag and drop functionality out of the box.
- `DockviewReact` allows tabs to be repositioned using drag and drop.
- `PaneviewReact` allows the repositioning of views using drag and drop on the header section.
You can use the utility methods `getPaneData` and `getPanelData` to manually extract the data transfer metadata associated with an active drag and drop event for either of the above components.
```tsx
import {
getPaneData,
getPanelData,
PanelTransfer,
PaneTransfer,
} from 'dockview';
const panelData: PanelTransfer | undefined = getPanelData();
if (panelData) {
// DockviewReact: data transfer metadata associated with the active drag and drop event
const { viewId, groupId, panelId } = panelData; // deconstructed object
}
const paneData: PaneTransfer | undefined = getPanelData();
if (paneData) {
// PaneviewReact: data transfer metadata associated with the active drag and drop event
const { viewId, paneId } = paneData; // deconstructed object
}
```
You can also intercept custom drag and drop events allowing dockview components to interact with and react to external drag events. `PaneviewReact` supports the method `onDidDrop` and `DockviewReact` supports the methods `onDidDrop` and `showDndOverlay`.
## Theming
The theme can be customized using the below set of CSS properties. You can find the built in themes [here](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/theme.scss) which could be used as an example to extend upon or build your own theme.