Resizable

Draggable split panes for a two-panel horizontal or vertical layout.

One

Two

<.resizable></.resizable>

Examples

Horizontal

Two panels split left and right.

One

Two

<div class="rounded-lg border h-48 max-w-md">
  <.resizable id="demo-horizontal" direction="horizontal">
    <.resizable_panel class="p-6">
      <span class="font-semibold">One</span>
    </.resizable_panel>
    <.resizable_handle direction="horizontal" />
    <.resizable_panel class="p-6">
      <span class="font-semibold">Two</span>
    </.resizable_panel>
  </.resizable>
</div>

Show code

Vertical

Two panels split top and bottom.

Top

Bottom

<div class="rounded-lg border h-64 max-w-md">
  <.resizable id="demo-vertical" direction="vertical">
    <.resizable_panel class="p-6">
      <span class="font-semibold">Top</span>
    </.resizable_panel>
    <.resizable_handle direction="vertical" />
    <.resizable_panel class="p-6">
      <span class="font-semibold">Bottom</span>
    </.resizable_panel>
  </.resizable>
</div>

Show code

Props

Name	Type	Default	Values
class	:string
direction	:string	"horizontal"	horizontal \| vertical
id	:string
rest	:global
inner_block (slot)	:slot