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.