diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx
index 3b57de0a8..4af21aca7 100644
--- a/packages/docs/docs/components/dockview.mdx
+++ b/packages/docs/docs/components/dockview.mdx
@@ -150,6 +150,32 @@ const MyComponent = (props: IDockviewPanelProps<{ title: string }>) => {
## Advanced Features
+### Resizing via API
+
+Each Dockview is comprised of a number of groups, each of which have a number of panels.
+Logically most people would want to resize a panel but practically this really translates to resizing the group to which the panel belongs.
+
+From the api you can access the panels group object (`props.group`) which exposes it's own api object (`props.groups.api`).
+This api is largly similar to the Gridview API.
+
+To resize an individual panel you could create a snippet similar to below.
+
+```tsx
+const onResizePanel = () => {
+ props.api.group.api.setSize({
+ height: 100,
+ });
+};
+```
+
+```tsx
+const onResizePanel = () => {
+ props.api.group.api.setSize({
+ width: 100,
+ });
+};
+```
+
### Locked group
Locking a group will disable all drop events for this group ensuring a user can not add additional panels to the group.
diff --git a/packages/docs/docusaurus.config.js b/packages/docs/docusaurus.config.js
index ad57ab55d..fc5450b1b 100644
--- a/packages/docs/docusaurus.config.js
+++ b/packages/docs/docusaurus.config.js
@@ -208,6 +208,10 @@ const config = {
},
],
},
+ announcementBar: {
+ id: 'announcementBar', // Increment on change
+ content: `⭐️ If you like Dockview, give it a star on GitHub`,
+ },
}),
};
diff --git a/packages/docs/src/pages/index.tsx b/packages/docs/src/pages/index.tsx
index 9911bd008..95e2dd4f5 100644
--- a/packages/docs/src/pages/index.tsx
+++ b/packages/docs/src/pages/index.tsx
@@ -67,8 +67,8 @@ export default function Home(): JSX.Element {
const { siteConfig } = useDocusaurusContext();
return (
diff --git a/packages/docs/versioned_docs/version-1.5.1/components/dockview.mdx b/packages/docs/versioned_docs/version-1.5.1/components/dockview.mdx
index 3b57de0a8..4af21aca7 100644
--- a/packages/docs/versioned_docs/version-1.5.1/components/dockview.mdx
+++ b/packages/docs/versioned_docs/version-1.5.1/components/dockview.mdx
@@ -150,6 +150,32 @@ const MyComponent = (props: IDockviewPanelProps<{ title: string }>) => {
## Advanced Features
+### Resizing via API
+
+Each Dockview is comprised of a number of groups, each of which have a number of panels.
+Logically most people would want to resize a panel but practically this really translates to resizing the group to which the panel belongs.
+
+From the api you can access the panels group object (`props.group`) which exposes it's own api object (`props.groups.api`).
+This api is largly similar to the Gridview API.
+
+To resize an individual panel you could create a snippet similar to below.
+
+```tsx
+const onResizePanel = () => {
+ props.api.group.api.setSize({
+ height: 100,
+ });
+};
+```
+
+```tsx
+const onResizePanel = () => {
+ props.api.group.api.setSize({
+ width: 100,
+ });
+};
+```
+
### Locked group
Locking a group will disable all drop events for this group ensuring a user can not add additional panels to the group.