mirror of
https://github.com/mathuo/dockview
synced 2025-03-12 08:52:05 +00:00
121 lines
10 KiB
Plaintext
121 lines
10 KiB
Plaintext
---
|
|
description: Gridview Documentation
|
|
---
|
|
|
|
import { SimpleGridview } from '@site/src/components/simpleGridview';
|
|
import { EventsGridview } from '@site/src/components/gridview/events';
|
|
import Link from '@docusaurus/Link';
|
|
|
|
# Gridview
|
|
|
|
## Introduction
|
|
|
|
<div
|
|
style={{
|
|
height: '300px',
|
|
backgroundColor: 'rgb(30,30,30)',
|
|
color: 'white',
|
|
margin: '20px 0px',
|
|
}}
|
|
>
|
|
<SimpleGridview />
|
|
</div>
|
|
|
|
## GridviewReact Component
|
|
|
|
```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 | 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> |
|
|
|
|
## Gridview API
|
|
|
|
```tsx
|
|
const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => {
|
|
// props.containerApi...
|
|
|
|
return <div>{`My first panel has the title: ${props.params.title}`}</div>;
|
|
};
|
|
```
|
|
|
|
```tsx
|
|
const onReady = (event: GridviewReadyEvent) => {
|
|
// event.api...
|
|
};
|
|
```
|
|
|
|
| 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[]` | all panels |
|
|
| orientation | `Orientation` | |
|
|
| | | |
|
|
| onDidLayoutChange | `Event<void>` | Fires on layout change |
|
|
| onDidLayoutFromJSON | `Event<void>` | Fires of layout change caused by a fromJSON deserialization call |
|
|
| onDidAddPanel | `Event<IGridviewPanel>` | Fires when a view is added |
|
|
| onDidRemovePanel | `Event<IGridviewPanel>` | Fires when a view is removed |
|
|
| onDidActivePanelChange | `Event<IGridviewPanel \| undefined>` | Fires when the active group changes |
|
|
| | | |
|
|
| 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` | 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> |
|
|
| clear | `(): void` | Clears the current layout |
|
|
|
|
## Gridview Panel API
|
|
|
|
```tsx
|
|
const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => {
|
|
// props.api...
|
|
|
|
return <div>{`My first panel has the title: ${props.params.title}`}</div>;
|
|
};
|
|
```
|
|
|
|
| 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>` | |
|
|
| onDidConstraintsChange | `onDidConstraintsChange: Event<PanelConstraintChangeEvent>` | |
|
|
| | | |
|
|
| setVisible | `(isVisible: boolean): void` | |
|
|
| setActive | `(): void` | |
|
|
| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
|
|
| setSize | `(event: SizeEvent): void` | |
|
|
|
|
## Events
|
|
|
|
`GridviewReact` exposes a number of events that the developer can listen to and below is a simple example with a log panel showing those events that occur.
|
|
|
|
<EventsGridview />
|