}){kind=icon}
+ );
+};
+
+const JavascriptIcon = (props: { height: number; width: number }) => {
+ return (
+ }){kind=icon}
+ );
+};
+
+export const MultiFrameworkContainer = (props: {
+ react: React.FC;
+ typescript: (parent: HTMLElement) => { dispose: () => void };
+ sandboxId: string;
+ height?: number;
+}) => {
+ const ref = React.useRef
+ {animation && (
+
+
+
+ )}
+ {framework === 'React' &&
+
+
+ );
+};
diff --git a/packages/docs/src/components/ui/referenceTable.tsx b/packages/docs/src/components/ui/referenceTable.tsx
new file mode 100644
index 000000000..1423122cc
--- /dev/null
+++ b/packages/docs/src/components/ui/referenceTable.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+export interface ReferenceProps {
+ props: {
+ prop: string;
+ default?: string;
+ type: string;
+ }[];
+}
+
+export const ReferenceTable = (props: ReferenceProps) => {
+ return (
+
+ {framework === 'React' ? (
+
+
+ | Property | +Type | +Default | +
|---|---|---|
+ {property.prop}
+ |
+
+ {property.type}
+ |
+
+ {property.default !== undefined && (
+ {property.default}
+ )}
+ |
+
+
+
+
+
+
+ );
+};
diff --git a/packages/docs/static/img/js-icon.svg b/packages/docs/static/img/js-icon.svg
new file mode 100644
index 000000000..9650ca78e
--- /dev/null
+++ b/packages/docs/static/img/js-icon.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/packages/docs/static/img/react-icon.svg b/packages/docs/static/img/react-icon.svg
new file mode 100644
index 000000000..ea77a618d
--- /dev/null
+++ b/packages/docs/static/img/react-icon.svg
@@ -0,0 +1,9 @@
+
diff --git a/packages/docs/versioned_docs/version-1.7.2/components/dockview.mdx b/packages/docs/versioned_docs/version-1.7.2/components/dockview.mdx
index b6d1a3e46..8097910eb 100644
--- a/packages/docs/versioned_docs/version-1.7.2/components/dockview.mdx
+++ b/packages/docs/versioned_docs/version-1.7.2/components/dockview.mdx
@@ -24,7 +24,7 @@ import RenderingDockview from '@site/sandboxes/rendering-dockview/src/app';
import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app';
import DockviewResizeContainer from '@site/sandboxes/resizecontainer-dockview/src/app';
import DockviewTabheight from '@site/sandboxes/tabheight-dockview/src/app';
-import { attach as attachDockviewVanilla } from '@site/sandboxes/vanilla-dockview/src/app';
+import { attach as attachDockviewVanilla } from '@site/sandboxes/javascript/vanilla-dockview/src/app';
# Dockview
@@ -728,6 +728,6 @@ The core library is published as an independant package under the name `dockview
> `dockview-core` is a dependency of `dockview` and automatically installed during the installation process of `dockview` via `npm install dockview`.
+ +> You can access the panels associated group through the `panel.group` variable. +> The group will always be defined and will change if a panel is moved into another group. ## DockviewReact Component @@ -340,7 +351,9 @@ return ( ### Third Party Dnd Libraries -To be completed... +This shows a simple example of a third-party library used inside a panel that relies on drag +and drop functionalities. This examples serves to show that `dockview` doesn't interfer with +any drag and drop logic for other controls.
-
-
-## VanillaJS
+## Vanilla JS
> Note: This section is experimental and support for Vanilla JS is a work in progress.
@@ -728,6 +739,6 @@ The core library is published as an independant package under the name `dockview
> `dockview-core` is a dependency of `dockview` and automatically installed during the installation process of `dockview` via `npm install dockview`.