Resizable

Home Resizable

The Resizable component enables users to adjust the size of panels or other UI elements by dragging. It’s useful for split views, layout editors, and dynamic interfaces.

<?php

use Lib\PHPXUI\{
    ResizablePanelGroup,
    ResizablePanel,
    ResizableHandle,
};

?>

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

Installation

npm

npx phpxui add Resizable

Usage

use Lib\PHPXUI\{
    ResizablePanelGroup,
    ResizablePanel,
    ResizableHandle,
}

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel>One</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>

Examples

Vertical

Header

Content

<?php

use Lib\\PHPXUI\\{
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle
};

?>

<ResizablePanelGroup direction="vertical" class="min-h-50 max-w-md rounded-lg border md:min-w-112.5">
  <ResizablePanel defaultSize="25">
    <div class="flex h-full items-center justify-center p-6">
      <span class="font-semibold">Header</span>
    </div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize="75">
    <div class="flex h-full items-center justify-center p-6">
      <span class="font-semibold">Content</span>
    </div>
  </ResizablePanel>
</ResizablePanelGroup>

Handle

Sidebar