ResizablePanelGroup

Panels with handles to resize them.

Pages

Linen shirt

Details

ResizablePanelGroup.tsx

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
  Surface,
  SurfaceContent
} from 'alinea/components'

export function ResizablePanelGroupExample() {
  return (
    <Surface style={{display: 'flex', width: 560, height: 220}}>
      <ResizablePanelGroup>
        <ResizablePanel defaultSize={180} minSize={120} maxSize={280}>
          <SurfaceContent>Pages</SurfaceContent>
        </ResizablePanel>
        <ResizableHandle withHandle />
        <ResizablePanel minSize={200} priority="high">
          <SurfaceContent>Linen shirt</SurfaceContent>
        </ResizablePanel>
        <ResizableHandle withHandle />
        <ResizablePanel defaultSize={160} minSize={120}>
          <SurfaceContent>Details</SurfaceContent>
        </ResizablePanel>
      </ResizablePanelGroup>
    </Surface>
  )
}

Props

`<ResizablePanelGroup>`

Lays out ResizablePanel children next to each other, with a draggable divider between them. Sizes are in px. Panels must be direct children, give them a key when they are rendered conditionally.

PropTypeDefaultDescription

directionOrientationDefault 'horizontal'The axis the panels are laid out on, defaults to horizontal

onLayout(sizes: Array<number>) => voidDefault –The size of every panel in px, after the user resized them

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<ResizablePanel>`

A panel of a ResizablePanelGroup

PropTypeDefaultDescription

defaultSizenumberDefault –Size in px on mount, and the size restored by double clicking a handle

sizenumberDefault –Size in px, eg. a stored preference. The panel is resized when it changes. Leave both sizes off to let the panel fill the remaining space.

onSizeChange(size: number) => voidDefault –Called with the new size in px after the user resized the panel

minSizenumberDefault –

maxSizenumberDefault –

visiblebooleanDefault –Hide the panel without unmounting its children, defaults to true

priority'low' | 'normal' | 'high'Default –Panels with a higher priority grow and shrink first when the group is resized, defaults to high for a panel without a size and low otherwise

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<ResizableHandle>`

Marks the divider between two panels of a ResizablePanelGroup. Drag it to resize the panels, double click it to restore their default sizes.

PropTypeDefaultDescription

withHandlebooleanDefault –Shows a grip on the divider