Resizable Component

Accessible resizable panel groups and layouts with keyboard support.

Horizontal

Panels arranged side by side with a vertical drag handle.

Panel 1

Panel 2

Vertical

Panels stacked vertically with a horizontal drag handle.

Header

Content

With Handle Grip

Visual grip indicator on the resize handle.

Left Panel

Right Panel

Three Panel Layout

Common sidebar + main + details layout.

Sidebar

Main Content

Details

Nested Layout

Combine horizontal and vertical layouts.

Navigation

Editor

Terminal

Email Client Example

Real-world layout example similar to email clients.

Folders

Inbox

Sent

Drafts

Trash

Messages

Welcome to BlazorUI

Getting started guide...

New Features

Check out the latest...

Documentation Update

We've updated our docs...

Welcome to BlazorUI

From: team@example.com

Hello,

Welcome to BlazorUI! We're excited to have you.

This resizable panel layout demonstrates how you can create complex email client-style interfaces.

Features

Horizontal and vertical orientations
Min/max size constraints per panel
Optional visual grip handle
Nested layouts support
OnLayoutChange event for persistence

Note

Implementation Note: Full drag-to-resize functionality requires JavaScript interop for mouse move/up event tracking. The current implementation provides component structure and styling. For production use with full drag behavior, additional JS interop would need to be added.

Installation

@using BlazorUI.Components.Resizable

Usage

<ResizablePanelGroup Direction="ResizableDirection.Horizontal" Class="min-h-[200px]">
    <ResizablePanel DefaultSize="50">
        <div>Left Panel</div>
    </ResizablePanel>
    <ResizableHandle Index="0" WithHandle="true" />
    <ResizablePanel DefaultSize="50">
        <div>Right Panel</div>
    </ResizablePanel>
</ResizablePanelGroup>