PanelA panel within a PanelGroup
| Name | Type | Description |
|---|---|---|
collapsed | boolean | undefined; | CONTROLLED COMPONENT If this prop is used it will be used as the source of truth for the collapsed state.
It should be used in conjunction with the Use this if you want full control over the collapsed state. When trying to collapse a panel it will defer to onCollapseChange to determine if it should be collapsed. |
onCollapseChange | ((isCollapsed: boolean) => void) | undefined | CONTROLLED COMPONENT A callback called with the new desired collapsed state. If paired w
with the Otherwise this will just be called with the new collapsed state so you can use it to update your own state. |
handle | Ref<PanelHandle> | undefined; | Imperative handle to control the panel |
onResize | OnResizeCallback | undefined; | Callback called when the panel is resized |
min | Unit | undefined; | The minimum size of the panel |
max | Unit | undefined; | The maximum size of the panel |
default | Unit | undefined; | The default size of the panel |
collapsible | boolean | undefined; | Whether the panel is collapsible |
defaultCollapsed | boolean | undefined; | Whether the panel should initially render as collapsed |
collapsedSize | Unit | undefined; | The size of the panel once collapsed |
isStaticAtRest | boolean | undefined; | By default the layout will be stored in percentage values while at rest. This makes scaling the layout easier when the container is resized. However you might have a panel you want to stay at a static size when the container is resized. |
collapseAnimation | "ease-in-out" | "bounce" | "linear" | { duration: number; easing: "ease-in-out" | "bounce" | "linear" | ((t: number) => number); } | undefined | Animate the collapse/expand |
| Name | Type | Description |
|---|---|---|
collapse | () => void | Collapse the panel |
isCollapsed | () => boolean; | Returns true if the panel is collapsed |
expand | () => void | Expand the panel |
isExpanded | () => boolean; | Returns true if the panel is expanded |
getId | () => string; | The id of the panel |
getPixelSize | () => number; | Get the size of the panel in pixels |
getPercentageSize | () => number; | Get percentage of the panel relative to the group |
setSize | (size: import("/vercel/path0/packages/state/dist/commonjs/index").Unit) => void | Set the size of the panel in pixels. This will be clamped to the min/max values of the panel. If you want the panel to collapse/expand you should use the expand/collapse methods. |