blatui

Components

Resizable

Accessible resizable panel groups and layouts.

php artisan blatui:add resizable
One
Two 
<x-ui.resizable-panel-group direction="horizontal" class="max-w-md rounded-lg border md:min-w-[450px]">
    <x-ui.resizable-panel :primary="true">
        <div class="flex h-[200px] items-center justify-center p-6">
            <span class="font-semibold">One</span>
        </div>
    </x-ui.resizable-panel>
    <x-ui.resizable-handle />
    <x-ui.resizable-panel>
        <div class="flex h-full items-center justify-center p-6">
            <span class="font-semibold">Two</span>
        </div>
    </x-ui.resizable-panel>
</x-ui.resizable-panel-group>

Nested

One
Two
Three 
<x-ui.resizable-panel-group direction="horizontal" class="max-w-md rounded-lg border md:min-w-[450px]">
    <x-ui.resizable-panel :primary="true">
        <div class="flex h-[260px] items-center justify-center p-6">
            <span class="font-semibold">One</span>
        </div>
    </x-ui.resizable-panel>
    <x-ui.resizable-handle />
    <x-ui.resizable-panel>
        <x-ui.resizable-panel-group direction="vertical">
            <x-ui.resizable-panel :primary="true">
                <div class="flex h-full items-center justify-center p-6">
                    <span class="font-semibold">Two</span>
                </div>
            </x-ui.resizable-panel>
            <x-ui.resizable-handle />
            <x-ui.resizable-panel>
                <div class="flex h-full items-center justify-center p-6">
                    <span class="font-semibold">Three</span>
                </div>
            </x-ui.resizable-panel>
        </x-ui.resizable-panel-group>
    </x-ui.resizable-panel>
</x-ui.resizable-panel-group>

Vertical

Header
Content 
<x-ui.resizable-panel-group direction="vertical" class="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]">
    <x-ui.resizable-panel :primary="true">
        <div class="flex h-full items-center justify-center p-6">
            <span class="font-semibold">Header</span>
        </div>
    </x-ui.resizable-panel>
    <x-ui.resizable-handle data-direction="vertical" />
    <x-ui.resizable-panel>
        <div class="flex h-full items-center justify-center p-6">
            <span class="font-semibold">Content</span>
        </div>
    </x-ui.resizable-panel>
</x-ui.resizable-panel-group>

With Handle

Sidebar
Content 
{{-- A visible grip handle between panels. --}}
<x-ui.resizable-panel-group direction="horizontal" class="max-w-md rounded-lg border md:min-w-[450px]">
    <x-ui.resizable-panel :primary="true">
        <div class="flex h-[200px] items-center justify-center p-6">
            <span class="font-semibold">Sidebar</span>
        </div>
    </x-ui.resizable-panel>
    <x-ui.resizable-handle :with-handle="true" />
    <x-ui.resizable-panel>
        <div class="flex h-full items-center justify-center p-6">
            <span class="font-semibold">Content</span>
        </div>
    </x-ui.resizable-panel>
</x-ui.resizable-panel-group>