Layout.resizable · Cinder UI

`Layout.resizable`

Progressive

Resizable split layout container with optional client-side persistence.

Current Scope
resizable/1 currently supports adjacent panel resizing, keyboard handle controls, optional visible handles, and localStorage persistence. It does not yet include collapsed panels, imperative panel APIs, or the richer nested-group ergonomics of a full panel system.

Uses the optional CuiResizable LiveView hook to support drag handles. Provide storage_key to persist panel percentages in localStorage.

Default

Panel A

Panel B

  <.resizable id="resizable-1">
  <:panel size={35}>
    <div class="rounded-md bg-muted p-2 text-xs">Panel A</div>
  </:panel>
  <:panel size={65}>
    <div class="rounded-md bg-muted/60 p-2 text-xs">Panel B</div>
  </:panel>
</.resizable>

Vertical

Top panel

Bottom panel

  <.resizable id="resizable-2" direction={:vertical} class="h-[240px]">
  <:panel size={45}>
    <div class="h-full rounded-md bg-muted p-2 text-xs">Top panel</div>
  </:panel>
  <:panel size={55}>
    <div class="h-full rounded-md bg-muted/60 p-2 text-xs">Bottom panel</div>
  </:panel>
</.resizable>

Handle + persisted sizes

Explorer

Editor

  <.resizable id="resizable-3" with_handle storage_key="docs-layout-main">
  <:panel size={30} min_size={20}>
    <div class="rounded-md bg-muted p-2 text-xs">Explorer</div>
  </:panel>
  <:panel size={70} min_size={30}>
    <div class="rounded-md bg-muted/60 p-2 text-xs">Editor</div>
  </:panel>
</.resizable>

Attributes

Name	Type	Default	Values	Global Includes
`class`	`:string`	—	—	—
`direction`	`:atom`	`:horizontal`	`:horizontal` , `:vertical`	—
`id`	`:string`	—	—	—
`rest`	`:global`	—	—	—
`storage_key`	`:string`	—	—	—
`with_handle`	`:boolean`	`false`	—	—

Slots

Slot	Slot Attributes
`panel` Required	`size` (:integer) `min_size` (:integer) `class` (:string)