mirror of
https://github.com/mathuo/dockview
synced 2025-03-12 08:52:05 +00:00
chore: update documentation
This commit is contained in:
parent
8810ad1a66
commit
d5920bd4f8
@ -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 <Link to="./gridview/#gridview-panel-api">Gridview API</Link>.
|
||||
|
||||
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.
|
||||
|
@ -208,6 +208,10 @@ const config = {
|
||||
},
|
||||
],
|
||||
},
|
||||
announcementBar: {
|
||||
id: 'announcementBar', // Increment on change
|
||||
content: `⭐️ If you like Dockview, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/mathuo/dockview">GitHub</a>`,
|
||||
},
|
||||
}),
|
||||
};
|
||||
|
||||
|
@ -67,8 +67,8 @@ export default function Home(): JSX.Element {
|
||||
const { siteConfig } = useDocusaurusContext();
|
||||
return (
|
||||
<Layout
|
||||
title={`${siteConfig.title}`}
|
||||
description="A zero dependency layout mananger for React."
|
||||
title={`${siteConfig.tagline}`}
|
||||
description={`${siteConfig.description}`}
|
||||
>
|
||||
<HomepageHeader2 />
|
||||
<main className="container">
|
||||
|
@ -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 <Link to="./gridview/#gridview-panel-api">Gridview API</Link>.
|
||||
|
||||
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.
|
||||
|
Loading…
Reference in New Issue
Block a user