dockview 4.13.1 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,7 +1,7 @@
1
1
  <div align="center">
2
2
  <h1>dockview</h1>
3
3
 
4
- <p>Zero dependency layout manager supporting tabs, groups, grids and splitviews with ReactJS support written in TypeScript</p>
4
+ <p>React bindings for dockview — zero dependency layout manager supporting tabs, groups, grids and splitviews</p>
5
5
 
6
6
  </div>
7
7
 
@@ -33,26 +33,48 @@ Please see the website: https://dockview.dev
33
33
  - High test coverage
34
34
  - Documentation website with live examples
35
35
  - Transparent builds and Code Analysis
36
- - Security at mind - verifed publishing and builds through GitHub Actions
36
+ - Security at mind - verified publishing and builds through GitHub Actions
37
37
 
38
- Want to verify our builds? Go [here](https://www.npmjs.com/package/dockview#Provenance).
39
-
40
- ## Quick start
38
+ ## Quick Start
41
39
 
42
- Dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. You can install dockview from [npm](https://www.npmjs.com/package/dockview).
40
+ Dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. Install from [npm](https://www.npmjs.com/package/dockview):
43
41
 
44
42
  ```
45
- npm install --save dockview
43
+ npm install dockview
46
44
  ```
47
45
 
48
- Within your project you must import or reference the stylesheet at `dockview/dist/styles/dockview.css` and attach a theme.
46
+ Import the stylesheet:
49
47
 
50
48
  ```css
51
- @import '~dockview/dist/styles/dockview.css';
49
+ @import 'dockview/dist/styles/dockview.css';
52
50
  ```
53
51
 
54
- You should also attach a dockview theme to an element containing your components. For example:
55
-
56
- ```html
57
- <body classname="dockview-theme-dark"></body>
52
+ Apply a theme and render the component:
53
+
54
+ ```tsx
55
+ import { DockviewReact } from 'dockview';
56
+
57
+ const components = {
58
+ myComponent: (props) => <div>Hello World</div>,
59
+ };
60
+
61
+ function App() {
62
+ return (
63
+ <div className="dockview-theme-dark" style={{ height: '400px' }}>
64
+ <DockviewReact
65
+ components={components}
66
+ onReady={(event) => {
67
+ event.api.addPanel({
68
+ id: 'panel_1',
69
+ component: 'myComponent',
70
+ });
71
+ }}
72
+ />
73
+ </div>
74
+ );
75
+ }
58
76
  ```
77
+
78
+ See the [documentation](https://dockview.dev) for full examples.
79
+
80
+ Want to verify our builds? Go [here](https://www.npmjs.com/package/dockview#Provenance).
@@ -46,6 +46,7 @@ var ReactHeaderActionsRendererPart = /** @class */ (function () {
46
46
  activePanel: this._group.model.activePanel,
47
47
  isGroupActive: this._group.api.isActive,
48
48
  group: this._group,
49
+ headerPosition: this._group.model.headerPosition,
49
50
  });
50
51
  };
51
52
  ReactHeaderActionsRendererPart.prototype.dispose = function () {