Components / Resizable

Resizable

Accessible resizable panel groups and layouts. Pure Blazor pointer events: the handle captures the pointer and adjusts each panel's flex-basis in C#, no JavaScript drag loop. This preview is the real component running in WebAssembly.

Examples

Drag the bar between panels to resize. Nest a ZitsResizablePanelGroup inside a panel for two-axis layouts.

One

Two

Three

razor

<ZitsResizablePanelGroup Direction="horizontal" class="max-w-md rounded-lg border md:min-w-[450px]">
    <ZitsResizablePanel DefaultSize="50">
        <div class="flex h-[200px] items-center justify-center p-6">
            <span class="font-semibold">One</span>
        </div>
    </ZitsResizablePanel>
    <ZitsResizableHandle WithHandle="true" />
    <ZitsResizablePanel DefaultSize="50">
        <ZitsResizablePanelGroup Direction="vertical">
            <ZitsResizablePanel DefaultSize="25">
                <div class="flex h-full items-center justify-center p-6">
                    <span class="font-semibold">Two</span>
                </div>
            </ZitsResizablePanel>
            <ZitsResizableHandle />
            <ZitsResizablePanel DefaultSize="75">
                <div class="flex h-full items-center justify-center p-6">
                    <span class="font-semibold">Three</span>
                </div>
            </ZitsResizablePanel>
        </ZitsResizablePanelGroup>
    </ZitsResizablePanel>
</ZitsResizablePanelGroup>

Vertical

Set Direction="vertical" to stack panels and get a horizontal handle.

Resizable.razor razor

<ZitsResizablePanelGroup Direction="vertical" class="min-h-[200px] max-w-md rounded-lg border">
    <ZitsResizablePanel DefaultSize="25">
        <div class="flex h-full items-center justify-center p-6">Header</div>
    </ZitsResizablePanel>
    <ZitsResizableHandle />
    <ZitsResizablePanel DefaultSize="75">
        <div class="flex h-full items-center justify-center p-6">Content</div>
    </ZitsResizablePanel>
</ZitsResizablePanelGroup>

With handle

Add WithHandle="true" to the handle for a visible grip affordance.

Resizable.razor razor

<ZitsResizablePanelGroup Direction="horizontal" class="max-w-md rounded-lg border">
    <ZitsResizablePanel DefaultSize="50">Sidebar</ZitsResizablePanel>
    <ZitsResizableHandle WithHandle="true" />
    <ZitsResizablePanel DefaultSize="50">Main</ZitsResizablePanel>
</ZitsResizablePanelGroup>

Installation

Terminal bash

navius add resizable

API reference

ZitsResizablePanelGroup

Prop	Type	Default
Direction	string	"horizontal"
ChildContent	RenderFragment?	-

ZitsResizablePanel

Prop	Type	Default
DefaultSize	double	50
MinSize	double	10
MaxSize	double	100
ChildContent	RenderFragment?	-

ZitsResizableHandle

Prop	Type	Default
WithHandle	bool	false