mirror of
https://github.com/mathuo/dockview
synced 2025-01-23 09:55:58 +00:00
chore: docs (plain ts examples)
This commit is contained in:
parent
107c20a81d
commit
32746e248d
@ -22,8 +22,11 @@
|
|||||||
"/packages/docs/sandboxes/simple-dockview",
|
"/packages/docs/sandboxes/simple-dockview",
|
||||||
"/packages/docs/sandboxes/tabheight-dockview",
|
"/packages/docs/sandboxes/tabheight-dockview",
|
||||||
"/packages/docs/sandboxes/updatetitle-dockview",
|
"/packages/docs/sandboxes/updatetitle-dockview",
|
||||||
"/packages/docs/sandboxes/typescript/vanilla-dockview",
|
"/packages/docs/sandboxes/watermark-dockview",
|
||||||
"/packages/docs/sandboxes/watermark-dockview"
|
"/packages/docs/sandboxes/typescript/fullwidthtab-dockview",
|
||||||
|
"/packages/docs/sandboxes/typescript/simple-dockview",
|
||||||
|
"/packages/docs/sandboxes/typescript/tabheight-dockview",
|
||||||
|
"/packages/docs/sandboxes/typescript/vanilla-dockview"
|
||||||
],
|
],
|
||||||
"node": "16"
|
"node": "16"
|
||||||
}
|
}
|
2
.gitignore
vendored
2
.gitignore
vendored
@ -13,4 +13,4 @@ test-report.xml
|
|||||||
*.code-workspace
|
*.code-workspace
|
||||||
yarn-error.log
|
yarn-error.log
|
||||||
/build
|
/build
|
||||||
docs/
|
/docs/
|
||||||
|
@ -30,6 +30,8 @@ import DockviewTabheight from '@site/sandboxes/tabheight-dockview/src/app';
|
|||||||
|
|
||||||
import { attach as attachDockviewVanilla } from '@site/sandboxes/javascript/vanilla-dockview/src/app';
|
import { attach as attachDockviewVanilla } from '@site/sandboxes/javascript/vanilla-dockview/src/app';
|
||||||
import { attach as attachSimpleDockview } from '@site/sandboxes/javascript/simple-dockview/src/app';
|
import { attach as attachSimpleDockview } from '@site/sandboxes/javascript/simple-dockview/src/app';
|
||||||
|
import { attach as attachTabHeightDockview } from '@site/sandboxes/javascript/tabheight-dockview/src/app';
|
||||||
|
import { attach as attachNativeDockview } from '@site/sandboxes/javascript/fullwidthtab-dockview/src/app';
|
||||||
|
|
||||||
# Dockview
|
# Dockview
|
||||||
|
|
||||||
@ -617,17 +619,21 @@ to the entire width of the group. For example:
|
|||||||
<DockviewReactComponent singleTabMode="fullwidth" {...otherProps} />
|
<DockviewReactComponent singleTabMode="fullwidth" {...otherProps} />
|
||||||
```
|
```
|
||||||
|
|
||||||
<Container sandboxId="fullwidthtab-dockview">
|
<MultiFrameworkContainer
|
||||||
<DockviewNative />
|
sandboxId="fullwidthtab-dockview"
|
||||||
</Container>
|
react={DockviewNative}
|
||||||
|
typescript={attachNativeDockview}
|
||||||
|
/>
|
||||||
|
|
||||||
### Tab Height
|
### Tab Height
|
||||||
|
|
||||||
Tab height can be controlled through CSS.
|
Tab height can be controlled through CSS.
|
||||||
|
|
||||||
<Container sandboxId="tabheight-dockview">
|
<MultiFrameworkContainer
|
||||||
<DockviewTabheight />
|
sandboxId="tabheight-dockview"
|
||||||
</Container>
|
react={DockviewTabheight}
|
||||||
|
typescript={attachTabHeightDockview}
|
||||||
|
/>
|
||||||
|
|
||||||
## Groups
|
## Groups
|
||||||
|
|
||||||
|
@ -14,7 +14,6 @@
|
|||||||
"noImplicitThis": true,
|
"noImplicitThis": true,
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"suppressImplicitAnyIndexErrors": true,
|
|
||||||
"noUnusedLocals": true
|
"noUnusedLocals": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -14,7 +14,6 @@
|
|||||||
"noImplicitThis": true,
|
"noImplicitThis": true,
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"suppressImplicitAnyIndexErrors": true,
|
|
||||||
"noUnusedLocals": true
|
"noUnusedLocals": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -14,7 +14,6 @@
|
|||||||
"noImplicitThis": true,
|
"noImplicitThis": true,
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"suppressImplicitAnyIndexErrors": true,
|
|
||||||
"noUnusedLocals": true
|
"noUnusedLocals": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -14,7 +14,6 @@
|
|||||||
"noImplicitThis": true,
|
"noImplicitThis": true,
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"suppressImplicitAnyIndexErrors": true,
|
|
||||||
"noUnusedLocals": true
|
"noUnusedLocals": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -14,7 +14,6 @@
|
|||||||
"noImplicitThis": true,
|
"noImplicitThis": true,
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"suppressImplicitAnyIndexErrors": true,
|
|
||||||
"noUnusedLocals": true
|
"noUnusedLocals": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -14,7 +14,6 @@
|
|||||||
"noImplicitThis": true,
|
"noImplicitThis": true,
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"suppressImplicitAnyIndexErrors": true,
|
|
||||||
"noUnusedLocals": true
|
"noUnusedLocals": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -14,7 +14,6 @@
|
|||||||
"noImplicitThis": true,
|
"noImplicitThis": true,
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"suppressImplicitAnyIndexErrors": true,
|
|
||||||
"noUnusedLocals": true
|
"noUnusedLocals": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -14,7 +14,6 @@
|
|||||||
"noImplicitThis": true,
|
"noImplicitThis": true,
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"suppressImplicitAnyIndexErrors": true,
|
|
||||||
"noUnusedLocals": true
|
"noUnusedLocals": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -14,7 +14,6 @@
|
|||||||
"noImplicitThis": true,
|
"noImplicitThis": true,
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"suppressImplicitAnyIndexErrors": true,
|
|
||||||
"noUnusedLocals": true
|
"noUnusedLocals": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -0,0 +1,27 @@
|
|||||||
|
{
|
||||||
|
"name": "javascript-fullwidthtab-dockview",
|
||||||
|
"description": "",
|
||||||
|
"keywords": [
|
||||||
|
"dockview"
|
||||||
|
],
|
||||||
|
"version": "1.0.0",
|
||||||
|
"main": "src/index.ts",
|
||||||
|
"dependencies": {
|
||||||
|
"dockview-core": "*"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"typescript": "^4.9.5"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test --env=jsdom",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not ie <= 11",
|
||||||
|
"not op_mini all"
|
||||||
|
]
|
||||||
|
}
|
@ -0,0 +1,44 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta name="theme-color" content="#000000">
|
||||||
|
<!--
|
||||||
|
manifest.json provides metadata used when your web app is added to the
|
||||||
|
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||||
|
-->
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||||
|
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
|
||||||
|
<!--
|
||||||
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
|
|
||||||
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||||
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
|
-->
|
||||||
|
<title>React App</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
You need to enable JavaScript to run this app.
|
||||||
|
</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
<!--
|
||||||
|
This HTML file is a template.
|
||||||
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
You can add webfonts, meta tags, or analytics to this file.
|
||||||
|
The build step will place the bundled scripts into the <body> tag.
|
||||||
|
|
||||||
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
@ -0,0 +1,17 @@
|
|||||||
|
.my-custom-tab {
|
||||||
|
padding: 0px 8px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
align-items: center;
|
||||||
|
background-color: var(--dv-tabs-and-actions-container-background-color);
|
||||||
|
|
||||||
|
.my-custom-tab-icon {
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: var(--dv-icon-hover-background-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,171 @@
|
|||||||
|
import {
|
||||||
|
IGroupPanelInitParameters,
|
||||||
|
IContentRenderer,
|
||||||
|
PanelUpdateEvent,
|
||||||
|
Parameters,
|
||||||
|
ITabRenderer,
|
||||||
|
DockviewComponent,
|
||||||
|
} from 'dockview-core';
|
||||||
|
import './app.scss';
|
||||||
|
|
||||||
|
class DefaultPanel implements IContentRenderer {
|
||||||
|
private _element: HTMLElement;
|
||||||
|
private _titleElement: HTMLElement;
|
||||||
|
private _paramsElement: HTMLElement;
|
||||||
|
|
||||||
|
get element(): HTMLElement {
|
||||||
|
return this._element;
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this._element = document.createElement('div');
|
||||||
|
this._element.style.display = 'flex';
|
||||||
|
this._element.style.justifyContent = 'center';
|
||||||
|
this._element.style.alignItems = 'center';
|
||||||
|
this._element.style.color = 'white';
|
||||||
|
this._element.style.height = '100%';
|
||||||
|
|
||||||
|
this._titleElement = document.createElement('span');
|
||||||
|
this._paramsElement = document.createElement('span');
|
||||||
|
|
||||||
|
this._element.appendChild(this._titleElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
init(params: IGroupPanelInitParameters): void {
|
||||||
|
this.render(params.params);
|
||||||
|
}
|
||||||
|
|
||||||
|
update(event: PanelUpdateEvent<Parameters>): void {
|
||||||
|
this.render(event.params);
|
||||||
|
}
|
||||||
|
|
||||||
|
private render(params: Record<string, any>) {
|
||||||
|
this._titleElement.textContent = params.title;
|
||||||
|
|
||||||
|
if (params.x) {
|
||||||
|
if (!this._paramsElement.parentElement) {
|
||||||
|
this._element.appendChild(this._paramsElement);
|
||||||
|
}
|
||||||
|
this._paramsElement.textContent = params.x;
|
||||||
|
} else {
|
||||||
|
this._paramsElement.parentElement?.removeChild(this._paramsElement);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class DefaultTab implements ITabRenderer {
|
||||||
|
private _element: HTMLElement;
|
||||||
|
private _title: HTMLElement;
|
||||||
|
|
||||||
|
get element(): HTMLElement {
|
||||||
|
return this._element;
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this._element = document.createElement('div');
|
||||||
|
this._element.className = 'my-custom-tab';
|
||||||
|
|
||||||
|
this._title = document.createElement('span');
|
||||||
|
|
||||||
|
const spacer = document.createElement('span');
|
||||||
|
spacer.style.flexGrow = '1';
|
||||||
|
|
||||||
|
const btn1 = document.createElement('span');
|
||||||
|
btn1.className = 'my-custom-tab-icon material-symbols-outlined';
|
||||||
|
btn1.textContent = 'minimize';
|
||||||
|
|
||||||
|
const btn2 = document.createElement('span');
|
||||||
|
btn2.className = 'my-custom-tab-icon material-symbols-outlined';
|
||||||
|
btn2.textContent = 'maximize';
|
||||||
|
|
||||||
|
const btn3 = document.createElement('span');
|
||||||
|
btn3.className = 'my-custom-tab-icon material-symbols-outlined';
|
||||||
|
btn3.textContent = 'close';
|
||||||
|
|
||||||
|
this._element.appendChild(this._title);
|
||||||
|
this._element.appendChild(spacer);
|
||||||
|
this._element.appendChild(btn1);
|
||||||
|
this._element.appendChild(btn2);
|
||||||
|
this._element.appendChild(btn3);
|
||||||
|
}
|
||||||
|
|
||||||
|
init(params: IGroupPanelInitParameters): void {
|
||||||
|
this.render(params.params);
|
||||||
|
}
|
||||||
|
|
||||||
|
update(event: PanelUpdateEvent<Parameters>): void {
|
||||||
|
this.render(event.params);
|
||||||
|
}
|
||||||
|
|
||||||
|
private render(params: Record<string, any>) {
|
||||||
|
this._title = params.title;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function attach(parent: HTMLElement): {
|
||||||
|
dispose: () => void;
|
||||||
|
} {
|
||||||
|
const element = document.createElement('div');
|
||||||
|
element.className = 'dockview-theme-abyss';
|
||||||
|
element.style.height = '100%';
|
||||||
|
element.style.width = '100%';
|
||||||
|
|
||||||
|
const dockview = new DockviewComponent({
|
||||||
|
components: {
|
||||||
|
default: DefaultPanel,
|
||||||
|
},
|
||||||
|
tabComponents: {
|
||||||
|
default: DefaultTab,
|
||||||
|
},
|
||||||
|
singleTabMode: 'fullwidth',
|
||||||
|
parentElement: element,
|
||||||
|
});
|
||||||
|
|
||||||
|
parent.appendChild(element);
|
||||||
|
|
||||||
|
const { clientWidth, clientHeight } = parent;
|
||||||
|
dockview.layout(clientWidth, clientHeight);
|
||||||
|
|
||||||
|
const panel1 = dockview.addPanel({
|
||||||
|
id: 'panel_1',
|
||||||
|
component: 'default',
|
||||||
|
tabComponent: 'default',
|
||||||
|
params: {
|
||||||
|
title: 'Window 1',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
panel1.group.locked = true;
|
||||||
|
|
||||||
|
const panel2 = dockview.addPanel({
|
||||||
|
id: 'panel_2',
|
||||||
|
component: 'default',
|
||||||
|
tabComponent: 'default',
|
||||||
|
params: {
|
||||||
|
title: 'Window 2',
|
||||||
|
},
|
||||||
|
position: {
|
||||||
|
direction: 'right',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
panel2.group.locked = true;
|
||||||
|
|
||||||
|
const panel3 = dockview.addPanel({
|
||||||
|
id: 'panel_3',
|
||||||
|
component: 'default',
|
||||||
|
tabComponent: 'default',
|
||||||
|
params: {
|
||||||
|
title: 'Window 3',
|
||||||
|
},
|
||||||
|
position: {
|
||||||
|
direction: 'below',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
panel3.group.locked = true;
|
||||||
|
|
||||||
|
return {
|
||||||
|
dispose: () => {
|
||||||
|
dockview.dispose();
|
||||||
|
element.remove();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
@ -0,0 +1,16 @@
|
|||||||
|
body {
|
||||||
|
margin: 0px;
|
||||||
|
color: white;
|
||||||
|
font-family: sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#root {
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "build/dist",
|
||||||
|
"module": "esnext",
|
||||||
|
"target": "es5",
|
||||||
|
"lib": ["es6", "dom"],
|
||||||
|
"sourceMap": true,
|
||||||
|
"allowJs": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"rootDir": "src",
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"noImplicitReturns": true,
|
||||||
|
"noImplicitThis": true,
|
||||||
|
"noImplicitAny": true,
|
||||||
|
"strictNullChecks": true,
|
||||||
|
"noUnusedLocals": true
|
||||||
|
}
|
||||||
|
}
|
@ -2,6 +2,8 @@ import {
|
|||||||
DockviewComponent,
|
DockviewComponent,
|
||||||
IContentRenderer,
|
IContentRenderer,
|
||||||
IGroupPanelInitParameters,
|
IGroupPanelInitParameters,
|
||||||
|
PanelUpdateEvent,
|
||||||
|
Parameters,
|
||||||
} from 'dockview-core';
|
} from 'dockview-core';
|
||||||
|
|
||||||
class DefaultPanel implements IContentRenderer {
|
class DefaultPanel implements IContentRenderer {
|
||||||
@ -20,6 +22,10 @@ class DefaultPanel implements IContentRenderer {
|
|||||||
init(params: IGroupPanelInitParameters): void {
|
init(params: IGroupPanelInitParameters): void {
|
||||||
this._element.textContent = params.params.title;
|
this._element.textContent = params.params.title;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
update(event: PanelUpdateEvent<Parameters>): void {
|
||||||
|
this._element.textContent = event.params.title;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function attach(parent: HTMLElement): {
|
export function attach(parent: HTMLElement): {
|
||||||
|
@ -0,0 +1,10 @@
|
|||||||
|
import './styles.css';
|
||||||
|
import 'dockview-core/dist/styles/dockview.css';
|
||||||
|
|
||||||
|
import { attach } from './app';
|
||||||
|
|
||||||
|
const rootElement = document.getElementById('root');
|
||||||
|
|
||||||
|
if (rootElement) {
|
||||||
|
attach(rootElement);
|
||||||
|
}
|
@ -14,7 +14,6 @@
|
|||||||
"noImplicitThis": true,
|
"noImplicitThis": true,
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"suppressImplicitAnyIndexErrors": true,
|
|
||||||
"noUnusedLocals": true
|
"noUnusedLocals": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -0,0 +1,27 @@
|
|||||||
|
{
|
||||||
|
"name": "javascript-tabheight-dockview",
|
||||||
|
"description": "",
|
||||||
|
"keywords": [
|
||||||
|
"dockview"
|
||||||
|
],
|
||||||
|
"version": "1.0.0",
|
||||||
|
"main": "src/index.ts",
|
||||||
|
"dependencies": {
|
||||||
|
"dockview-core": "*"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"typescript": "^4.9.5"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test --env=jsdom",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not ie <= 11",
|
||||||
|
"not op_mini all"
|
||||||
|
]
|
||||||
|
}
|
@ -0,0 +1,44 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta name="theme-color" content="#000000">
|
||||||
|
<!--
|
||||||
|
manifest.json provides metadata used when your web app is added to the
|
||||||
|
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||||
|
-->
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||||
|
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
|
||||||
|
<!--
|
||||||
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
|
|
||||||
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||||
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
|
-->
|
||||||
|
<title>React App</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
You need to enable JavaScript to run this app.
|
||||||
|
</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
<!--
|
||||||
|
This HTML file is a template.
|
||||||
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
You can add webfonts, meta tags, or analytics to this file.
|
||||||
|
The build step will place the bundled scripts into the <body> tag.
|
||||||
|
|
||||||
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
@ -0,0 +1,3 @@
|
|||||||
|
.skinny-tabs {
|
||||||
|
--dv-tabs-and-actions-container-height: 20px;
|
||||||
|
}
|
110
packages/docs/sandboxes/javascript/tabheight-dockview/src/app.ts
Normal file
110
packages/docs/sandboxes/javascript/tabheight-dockview/src/app.ts
Normal file
@ -0,0 +1,110 @@
|
|||||||
|
import {
|
||||||
|
DockviewComponent,
|
||||||
|
IContentRenderer,
|
||||||
|
IGroupPanelInitParameters,
|
||||||
|
PanelUpdateEvent,
|
||||||
|
Parameters,
|
||||||
|
} from 'dockview-core';
|
||||||
|
import './app.scss';
|
||||||
|
|
||||||
|
class DefaultPanel implements IContentRenderer {
|
||||||
|
private _element: HTMLElement;
|
||||||
|
|
||||||
|
get element(): HTMLElement {
|
||||||
|
return this._element;
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this._element = document.createElement('div');
|
||||||
|
this._element.style.padding = '20px';
|
||||||
|
this._element.style.color = 'white';
|
||||||
|
}
|
||||||
|
|
||||||
|
init(params: IGroupPanelInitParameters): void {
|
||||||
|
this._element.textContent = params.params.title;
|
||||||
|
}
|
||||||
|
|
||||||
|
update(event: PanelUpdateEvent<Parameters>): void {
|
||||||
|
this._element.textContent = event.params.title;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function attach(parent: HTMLElement): {
|
||||||
|
dispose: () => void;
|
||||||
|
} {
|
||||||
|
const element = document.createElement('div');
|
||||||
|
element.className = 'dockview-theme-abyss skinny-tabs';
|
||||||
|
element.style.height = '100%';
|
||||||
|
element.style.width = '100%';
|
||||||
|
|
||||||
|
const dockview = new DockviewComponent({
|
||||||
|
components: {
|
||||||
|
default: DefaultPanel,
|
||||||
|
},
|
||||||
|
parentElement: element,
|
||||||
|
});
|
||||||
|
|
||||||
|
parent.appendChild(element);
|
||||||
|
|
||||||
|
const { clientWidth, clientHeight } = parent;
|
||||||
|
dockview.layout(clientWidth, clientHeight);
|
||||||
|
|
||||||
|
dockview.addPanel({
|
||||||
|
id: 'panel_1',
|
||||||
|
component: 'default',
|
||||||
|
params: {
|
||||||
|
title: 'Panel 1',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
dockview.addPanel({
|
||||||
|
id: 'panel_2',
|
||||||
|
component: 'default',
|
||||||
|
params: {
|
||||||
|
title: 'Panel 2',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
dockview.addPanel({
|
||||||
|
id: 'panel_3',
|
||||||
|
component: 'default',
|
||||||
|
params: {
|
||||||
|
title: 'Panel 3',
|
||||||
|
},
|
||||||
|
position: { referencePanel: 'panel_1', direction: 'right' },
|
||||||
|
});
|
||||||
|
|
||||||
|
dockview.addPanel({
|
||||||
|
id: 'panel_4',
|
||||||
|
component: 'default',
|
||||||
|
params: {
|
||||||
|
title: 'Panel 4',
|
||||||
|
},
|
||||||
|
position: { referencePanel: 'panel_3', direction: 'right' },
|
||||||
|
});
|
||||||
|
|
||||||
|
dockview.addPanel({
|
||||||
|
id: 'panel_5',
|
||||||
|
component: 'default',
|
||||||
|
params: {
|
||||||
|
title: 'Panel 5',
|
||||||
|
},
|
||||||
|
position: { referencePanel: 'panel_4', direction: 'below' },
|
||||||
|
});
|
||||||
|
|
||||||
|
dockview.addPanel({
|
||||||
|
id: 'panel_6',
|
||||||
|
component: 'default',
|
||||||
|
params: {
|
||||||
|
title: 'Panel 6',
|
||||||
|
},
|
||||||
|
position: { referencePanel: 'panel_5', direction: 'right' },
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
dispose: () => {
|
||||||
|
dockview.dispose();
|
||||||
|
element.remove();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
@ -0,0 +1,10 @@
|
|||||||
|
import './styles.css';
|
||||||
|
import 'dockview-core/dist/styles/dockview.css';
|
||||||
|
|
||||||
|
import { attach } from './app';
|
||||||
|
|
||||||
|
const rootElement = document.getElementById('root');
|
||||||
|
|
||||||
|
if (rootElement) {
|
||||||
|
attach(rootElement);
|
||||||
|
}
|
@ -0,0 +1,16 @@
|
|||||||
|
body {
|
||||||
|
margin: 0px;
|
||||||
|
color: white;
|
||||||
|
font-family: sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#root {
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "build/dist",
|
||||||
|
"module": "esnext",
|
||||||
|
"target": "es5",
|
||||||
|
"lib": ["es6", "dom"],
|
||||||
|
"sourceMap": true,
|
||||||
|
"allowJs": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"rootDir": "src",
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"noImplicitReturns": true,
|
||||||
|
"noImplicitThis": true,
|
||||||
|
"noImplicitAny": true,
|
||||||
|
"strictNullChecks": true,
|
||||||
|
"noUnusedLocals": true
|
||||||
|
}
|
||||||
|
}
|
@ -14,7 +14,6 @@
|
|||||||
"noImplicitThis": true,
|
"noImplicitThis": true,
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"suppressImplicitAnyIndexErrors": true,
|
|
||||||
"noUnusedLocals": true
|
"noUnusedLocals": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -14,7 +14,6 @@
|
|||||||
"noImplicitThis": true,
|
"noImplicitThis": true,
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"suppressImplicitAnyIndexErrors": true,
|
|
||||||
"noUnusedLocals": true
|
"noUnusedLocals": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -14,7 +14,6 @@
|
|||||||
"noImplicitThis": true,
|
"noImplicitThis": true,
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"suppressImplicitAnyIndexErrors": true,
|
|
||||||
"noUnusedLocals": true
|
"noUnusedLocals": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -14,7 +14,6 @@
|
|||||||
"noImplicitThis": true,
|
"noImplicitThis": true,
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"suppressImplicitAnyIndexErrors": true,
|
|
||||||
"noUnusedLocals": true
|
"noUnusedLocals": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -14,7 +14,6 @@
|
|||||||
"noImplicitThis": true,
|
"noImplicitThis": true,
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"suppressImplicitAnyIndexErrors": true,
|
|
||||||
"noUnusedLocals": true
|
"noUnusedLocals": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -14,7 +14,6 @@
|
|||||||
"noImplicitThis": true,
|
"noImplicitThis": true,
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"suppressImplicitAnyIndexErrors": true,
|
|
||||||
"noUnusedLocals": true
|
"noUnusedLocals": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -14,7 +14,6 @@
|
|||||||
"noImplicitThis": true,
|
"noImplicitThis": true,
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"suppressImplicitAnyIndexErrors": true,
|
|
||||||
"noUnusedLocals": true
|
"noUnusedLocals": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -14,7 +14,6 @@
|
|||||||
"noImplicitThis": true,
|
"noImplicitThis": true,
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"suppressImplicitAnyIndexErrors": true,
|
|
||||||
"noUnusedLocals": true
|
"noUnusedLocals": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -14,7 +14,6 @@
|
|||||||
"noImplicitThis": true,
|
"noImplicitThis": true,
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"suppressImplicitAnyIndexErrors": true,
|
|
||||||
"noUnusedLocals": true
|
"noUnusedLocals": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -14,7 +14,6 @@
|
|||||||
"noImplicitThis": true,
|
"noImplicitThis": true,
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"suppressImplicitAnyIndexErrors": true,
|
|
||||||
"noUnusedLocals": true
|
"noUnusedLocals": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -14,7 +14,6 @@
|
|||||||
"noImplicitThis": true,
|
"noImplicitThis": true,
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"suppressImplicitAnyIndexErrors": true,
|
|
||||||
"noUnusedLocals": true
|
"noUnusedLocals": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user