Resizable

Accessible resizable panel groups and layouts with keyboard support.

Examples

Default

One

Two

Three

<script setup>
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from '@empathyds/vue'
</script>

<ResizablePanelGroup
  direction="horizontal"
  class="max-w-md rounded-lg border"
>
  <ResizablePanel :default-size="50">
    <div class="flex h-50 items-center justify-center p-6">
      <span class="font-semibold">One</span>
    </div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel :default-size="50">
    <ResizablePanelGroup direction="vertical">
      <ResizablePanel :default-size="25">
        <div class="flex h-full items-center justify-center p-6">
          <span class="font-semibold">Two</span>
        </div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel :default-size="75">
        <div class="flex h-full items-center justify-center p-6">
          <span class="font-semibold">Three</span>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  </ResizablePanel>
</ResizablePanelGroup>

Props

ResizablePanelGroup

Prop	Type	Default	Description
direction	horizontal | vertical	-	The direction of the panel group.
units	pixel | percent	percent	The units for the panel size.
id	string	-	The id of the panel group.

ResizablePanel

Prop	Type	Default	Description
defaultSize	number	-	The default size of the panel.
minSize	number	0	The minimum size of the panel.
maxSize	number	100	The maximum size of the panel.
id	string	-	The id of the panel.
order	number	-	The order of the panel.
tagName	string	div	The tag name of the panel.
collapsible	boolean	false	Whether the panel is collapsible.
collapsedSize	number	0	The size of the panel when collapsed.
collapseThreshold	number	0	The threshold for collapsing the panel.

Slots

ResizablePanelGroup

Slot	Description
default	The panels and handles of the group.

ResizablePanel

Slot	Description
default	The content of the panel.