mirror of
https://github.com/mathuo/dockview
synced 2025-09-04 08:26:28 +00:00
chore: docs
This commit is contained in:
mathuo
parent
6acc444c58
commit
2323c24a6a
@ -2,6 +2,7 @@
|
||||
"label": "Components",
|
||||
"collapsible": true,
|
||||
"collapsed": false,
|
||||
"position": 2,
|
||||
"link": {
|
||||
"type": "generated-index",
|
||||
"title": "Components"
|
||||
|
||||
@ -57,21 +57,21 @@ You can create a Dockview through the use of the `DockviewReact` component.
|
||||
import { DockviewReact } 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 <Link to="../basics/#auto-resizing">Auto Resizing</Link> |
|
||||
| onDidDrop | Event | Yes | false | |
|
||||
| showDndOverlay | Event | Yes | false | |
|
||||
| defaultTabComponent | object | Yes | | |
|
||||
| leftHeaderActionsComponent | object | Yes | | |
|
||||
| rightHeaderActionsComponent | object | Yes | | |
|
||||
| singleTabMode | 'fullwidth' \| 'default' | Yes | 'default' | |
|
||||
| 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 | |
|
||||
| onDidDrop | Event | Yes | false | |
|
||||
| showDndOverlay | Event | Yes | false | |
|
||||
| defaultTabComponent | object | Yes | | |
|
||||
| leftHeaderActionsComponent | object | Yes | | |
|
||||
| rightHeaderActionsComponent | object | Yes | | |
|
||||
| singleTabMode | 'fullwidth' \| 'default' | Yes | 'default' | |
|
||||
|
||||
## Dockview API
|
||||
|
||||
@ -92,44 +92,44 @@ 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` | |
|
||||
| addGroup | `(options? AddGroupOptions): void` | |
|
||||
| closeAllGroups | `(): void` | |
|
||||
| removeGroup | `(group: GroupPanel): void` | |
|
||||
| getGroup | `(id: string): GroupPanel \| undefined` | |
|
||||
| | | |
|
||||
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
|
||||
| focus | `(): void` | |
|
||||
| layout | `(width: number, height:number): void` | <Link to="../basics/#auto-resizing">Auto Resizing</Link> |
|
||||
| fromJSON | `(data: SerializedDockview): void` | <Link to="../basics/#serialization">Serialization</Link> |
|
||||
| toJSON | `(): SerializedDockview` | <Link to="../basics/#serialization">Serialization</Link> |
|
||||
| clear | `(): void` | Clears the current layout |
|
||||
| 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` | |
|
||||
| addGroup | `(options? AddGroupOptions): void` | |
|
||||
| closeAllGroups | `(): void` | |
|
||||
| removeGroup | `(group: GroupPanel): void` | |
|
||||
| getGroup | `(id: string): GroupPanel \| undefined` | |
|
||||
| | | |
|
||||
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
|
||||
| focus | `(): void` | |
|
||||
| layout | `(width: number, height:number): void` | |
|
||||
| fromJSON | `(data: SerializedDockview): void` | |
|
||||
| toJSON | `(): SerializedDockview` | |
|
||||
| clear | `(): void` | Clears the current layout |
|
||||
|
||||
## Dockview Panel API
|
||||
|
||||
|
||||
@ -27,15 +27,15 @@ import Link from '@docusaurus/Link';
|
||||
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 | See <Link to="../basics/#proportional-layout">Proportional layout</Link> |
|
||||
| hideBorders | boolean | Yes | false | |
|
||||
| className | string | Yes | '' | |
|
||||
| disableAutoResizing | boolean | Yes | false | See <Link to="../basics/#auto-resizing">Auto Resizing</Link> |
|
||||
| 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 | > |
|
||||
|
||||
## Gridview API
|
||||
|
||||
@ -78,9 +78,9 @@ const onReady = (event: GridviewReadyEvent) => {
|
||||
| | | |
|
||||
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
|
||||
| focus | `(): void` | Focus the active panel, if exists |
|
||||
| layout | `(width: number, height:number): void` | <Link to="../basics/#auto-resizing">Auto Resizing</Link> |
|
||||
| fromJSON | `(data: SerializedGridview): void` | <Link to="../basics/#serialization">Serialization</Link> |
|
||||
| toJSON | `(): SerializedGridview` | <Link to="../basics/#serialization">Serialization</Link> |
|
||||
| layout | `(width: number, height:number): void` | |
|
||||
| fromJSON | `(data: SerializedGridview): void` | |
|
||||
| toJSON | `(): SerializedGridview` | |
|
||||
| clear | `(): void` | Clears the current layout |
|
||||
|
||||
## Gridview Panel API
|
||||
|
||||
@ -106,15 +106,15 @@ You can create a Paneview through the use of the `ReactPaneview` component.
|
||||
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 | <Link to="../basics/#auto-resizing">Auto Resizing</Link> |
|
||||
| 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 | |
|
||||
| disableDnd | boolean | Yes | false | |
|
||||
| onDidDrop | Event | Yes | | |
|
||||
|
||||
## Paneview API
|
||||
|
||||
@ -156,9 +156,9 @@ const onReady = (event: GridviewReadyEvent) => {
|
||||
| getPanel | `(id:string): IPaneviewPanel \| undefined` | |
|
||||
| | | |
|
||||
| focus | `(): void` | Focus the active panel, if exists |
|
||||
| layout | `(width: number, height:number): void` | See <Link to="../basics/#auto-resizing">Auto Resizing</Link> |
|
||||
| fromJSON | `(data: SerializedPaneview): void` | <Link to="../basics/#serialization">Serialization</Link> |
|
||||
| toJSON | `(): SerializedPaneview` | <Link to="../basics/#serialization">Serialization</Link> |
|
||||
| layout | `(width: number, height:number): void` | |
|
||||
| fromJSON | `(data: SerializedPaneview): void` | |
|
||||
| toJSON | `(): SerializedPaneview` | |
|
||||
| clear | `(): void` | Clears the current layout |
|
||||
|
||||
## Paneview Panel API
|
||||
|
||||
@ -85,15 +85,15 @@ import { ReactSplitview } from 'dockview';
|
||||
|
||||
Using the `onReady` prop you can access to the component `api` and add panels either through deserialization or the individual addition of panels.
|
||||
|
||||
| Property | Type | Optional | Default | Description |
|
||||
| ------------------- | -------------------------------------- | -------- | ------------------------ | ------------------------------------------------------------------------ |
|
||||
| onReady | `(event: SplitviewReadyEvent) => void` | No | | Function |
|
||||
| components | `Record<string, ISplitviewPanelProps>` | No | | Panel renderers |
|
||||
| orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview |
|
||||
| proportionalLayout | `boolean` | Yes | `true` | See <Link to="../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 to="../basics/#auto-resizing">Auto Resizing</Link> |
|
||||
| Property | Type | Optional | Default | Description |
|
||||
| ------------------- | -------------------------------------- | -------- | ------------------------ | ------------------------------- |
|
||||
| onReady | `(event: SplitviewReadyEvent) => void` | No | | Function |
|
||||
| components | `Record<string, ISplitviewPanelProps>` | No | | Panel renderers |
|
||||
| orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview |
|
||||
| proportionalLayout | `boolean` | Yes | `true` | |
|
||||
| hideBorders | `boolean` | Yes | `false` | Hide the borders between panels |
|
||||
| className | `string` | Yes | `''` | Attaches a classname |
|
||||
| disableAutoResizing | `boolean` | Yes | `false` | |
|
||||
|
||||
## Splitview API
|
||||
|
||||
@ -135,9 +135,9 @@ const onReady = (event: SplitviewReadyEvent) => {
|
||||
| | |
|
||||
| updateOptions | `(options: SplitviewComponentUpdateOptions): void` | |
|
||||
| focus | `(): void` | Focus the active panel, if exists |
|
||||
| layout | `(width: number, height:number): void` | See <Link to="../basics/#auto-resizing">Auto Resizing</Link> |
|
||||
| fromJSON | `(data: SerializedSplitview): void` | <Link to="../basics/#serialization">Serialization</Link> |
|
||||
| toJSON | `(): SerializedSplitview` | <Link to="../basics/#serialization">Serialization</Link> |
|
||||
| layout | `(width: number, height:number): void` | |
|
||||
| fromJSON | `(data: SerializedSplitview): void` | |
|
||||
| toJSON | `(): SerializedSplitview` | |
|
||||
| clear | `(): void` | Clears the current layout |
|
||||
|
||||
## Splitview Panel API
|
||||
|
||||
52
packages/docs/docs/contributing.mdx
Normal file
52
packages/docs/docs/contributing.mdx
Normal file
@ -0,0 +1,52 @@
|
||||
---
|
||||
sidebar_position: 3
|
||||
description: Contributing
|
||||
---
|
||||
|
||||
# Contributing
|
||||
|
||||
# Project description
|
||||
|
||||
Dockview is a layout manager library designed to provide a complete layouting solution.
|
||||
It is written in plain TypeScript and can be used without any framework although
|
||||
an extensive React wrapper has always and will always be provided for those using the React framework.
|
||||
|
||||
The project is hosted on GitHub and developed within a Monorepo powered by [Lerna](https://github.com/lerna/lerna).
|
||||
It is developed using the `yarn` package manager since at the time of creation `yarn` was far superior when it came to managing monorepos.
|
||||
The Monorepo contains three packages:
|
||||
|
||||
#### packages/dockview-core
|
||||
|
||||
The core project is entirely written in plain TypeScript without any frameworks or dependencies and it's source-code can be found
|
||||
within the `dockview-core` package which is also published to npm.
|
||||
|
||||
#### packages/dockview
|
||||
|
||||
A complete collection of React components for use through the React framework to use dockview seamlessly
|
||||
and is published to npm. It depends explicitly on `dockview-core` so there is no need to additionally install `dockview-core`.
|
||||
|
||||
> Dockview was originally a React-only library which is why the React version maintains the name `dockview` after
|
||||
> splitting the core logic into a seperate package named `dockview-core`.
|
||||
|
||||
#### packages/docs
|
||||
|
||||
This package contains the code for this documentation website and examples hosted through **CodeSandbox**. It is **not** a published package on npm.
|
||||
|
||||
# Run the project locally
|
||||
|
||||
1. After you have cloned the project from GitHub run `yarn` at the root of the project which will install all project dependencies.
|
||||
2. In order build `packages/dockview-core` then `packages/dockview`.
|
||||
3. Run the docs website through `npm run start` in the `packages/docs` directory and go to _http://localhost:3000_ which
|
||||
will now be running the local copy of `dockview` that you have just built.
|
||||
|
||||
### Examples
|
||||
|
||||
All examples can be found under [**packages/docs/sandboxes**](https://github.com/mathuo/dockview/tree/master/packages/docs/sandboxes).
|
||||
Each example is an independently runnable example through **CodeSandbox**.
|
||||
Through the documentation you will see links to runnable **CodeSandbox** examples.
|
||||
|
||||
## FAQ
|
||||
|
||||
#### Are there any plans to publish wrapper libraries for other frameworks such as Angular and Vue?
|
||||
|
||||
Currently no but this is open for contributors to try.
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
sidebar_position: 3
|
||||
sidebar_position: 1
|
||||
description: Theming Dockview Components
|
||||
---
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user