Resizable

ResizablePanel component (Phlex) Individual resizable panel within a panel group

Examples

Default

Accessible resizable panel groups with keyboard support.

One

Two

<%= render "ui/resizable/panel_group", direction: "horizontal", classes: "max-w-md rounded-lg border" do %>
  <%= render "ui/resizable/panel", default_size: 50 do %>
    <div class="flex h-[200px] items-center justify-center p-6">
      <span class="font-semibold">One</span>
    </div>
  <% end %>
  <%= render "ui/resizable/handle" %>
  <%= render "ui/resizable/panel", default_size: 50 do %>
    <div class="flex h-[200px] items-center justify-center p-6">
      <span class="font-semibold">Two</span>
    </div>
  <% end %>
<% end %>

One

Two

<%= render UI::ResizablePanelGroup.new(direction: "horizontal", classes: "max-w-md rounded-lg border") do %>
  <%= render UI::ResizablePanel.new(default_size: 50) do %>
    <div class="flex h-[200px] items-center justify-center p-6">
      <span class="font-semibold">One</span>
    </div>
  <% end %>
  <%= render UI::ResizableHandle.new %>
  <%= render UI::ResizablePanel.new(default_size: 50) do %>
    <div class="flex h-[200px] items-center justify-center p-6">
      <span class="font-semibold">Two</span>
    </div>
  <% end %>
<% end %>

One

Two

<%= render UI::ResizablePanelGroupComponent.new(direction: "horizontal", classes: "max-w-md rounded-lg border") do %>
  <%= render UI::ResizablePanelComponent.new(default_size: 50) do %>
    <div class="flex h-[200px] items-center justify-center p-6">
      <span class="font-semibold">One</span>
    </div>
  <% end %>
  <%= render UI::ResizableHandleComponent.new %>
  <%= render UI::ResizablePanelComponent.new(default_size: 50) do %>
    <div class="flex h-[200px] items-center justify-center p-6">
      <span class="font-semibold">Two</span>
    </div>
  <% end %>
<% end %>

Vertical

Panels stacked vertically.

One

Two

<%= render "ui/resizable/panel_group", direction: "vertical", classes: "min-h-[200px] max-w-md rounded-lg border" do %>
  <%= render "ui/resizable/panel", default_size: 50 do %>
    <div class="flex h-full items-center justify-center p-6">
      <span class="font-semibold">One</span>
    </div>
  <% end %>
  <%= render "ui/resizable/handle" %>
  <%= render "ui/resizable/panel", default_size: 50 do %>
    <div class="flex h-full items-center justify-center p-6">
      <span class="font-semibold">Two</span>
    </div>
  <% end %>
<% end %>

One

Two

<%= render UI::ResizablePanelGroup.new(direction: "vertical", classes: "min-h-[200px] max-w-md rounded-lg border") do %>
  <%= render UI::ResizablePanel.new(default_size: 50) do %>
    <div class="flex h-full items-center justify-center p-6">
      <span class="font-semibold">One</span>
    </div>
  <% end %>
  <%= render UI::ResizableHandle.new %>
  <%= render UI::ResizablePanel.new(default_size: 50) do %>
    <div class="flex h-full items-center justify-center p-6">
      <span class="font-semibold">Two</span>
    </div>
  <% end %>
<% end %>

One

Two

<%= render UI::ResizablePanelGroupComponent.new(direction: "vertical", classes: "min-h-[200px] max-w-md rounded-lg border") do %>
  <%= render UI::ResizablePanelComponent.new(default_size: 50) do %>
    <div class="flex h-full items-center justify-center p-6">
      <span class="font-semibold">One</span>
    </div>
  <% end %>
  <%= render UI::ResizableHandleComponent.new %>
  <%= render UI::ResizablePanelComponent.new(default_size: 50) do %>
    <div class="flex h-full items-center justify-center p-6">
      <span class="font-semibold">Two</span>
    </div>
  <% end %>
<% end %>

Handle with Grip

Handle with visible grip icon for better visibility.

One

Two

<%= render "ui/resizable/panel_group", direction: "horizontal", classes: "min-h-[200px] max-w-md rounded-lg border" do %>
  <%= render "ui/resizable/panel", default_size: 50 do %>
    <div class="flex h-full items-center justify-center p-6">
      <span class="font-semibold">One</span>
    </div>
  <% end %>
  <%= render "ui/resizable/handle", with_handle: true %>
  <%= render "ui/resizable/panel", default_size: 50 do %>
    <div class="flex h-full items-center justify-center p-6">
      <span class="font-semibold">Two</span>
    </div>
  <% end %>
<% end %>

One

Two

<%= render UI::ResizablePanelGroup.new(direction: "horizontal", classes: "min-h-[200px] max-w-md rounded-lg border") do %>
  <%= render UI::ResizablePanel.new(default_size: 50) do %>
    <div class="flex h-full items-center justify-center p-6">
      <span class="font-semibold">One</span>
    </div>
  <% end %>
  <%= render UI::ResizableHandle.new(with_handle: true) %>
  <%= render UI::ResizablePanel.new(default_size: 50) do %>
    <div class="flex h-full items-center justify-center p-6">
      <span class="font-semibold">Two</span>
    </div>
  <% end %>
<% end %>

One

Two

<%= render UI::ResizablePanelGroupComponent.new(direction: "horizontal", classes: "min-h-[200px] max-w-md rounded-lg border") do %>
  <%= render UI::ResizablePanelComponent.new(default_size: 50) do %>
    <div class="flex h-full items-center justify-center p-6">
      <span class="font-semibold">One</span>
    </div>
  <% end %>
  <%= render UI::ResizableHandleComponent.new(with_handle: true) %>
  <%= render UI::ResizablePanelComponent.new(default_size: 50) do %>
    <div class="flex h-full items-center justify-center p-6">
      <span class="font-semibold">Two</span>
    </div>
  <% end %>
<% end %>

API Reference

Resizable Panel

Parameters

Name	Type	Default	Description
default_size	String	nil	The default size
min_size	String	nil	The min size
max_size	String	nil	The max size

Group

Parameters

Name	Type	Default	Description
direction	String	horizontal	The direction
keyboard_resize_by	Integer	10	The keyboard resize by