Resizable
Resizable panel groups for building flexible layouts where users can drag handles to adjust the size of adjacent panels, commonly used for code editors, file explorers, and split-view interfaces.
Horizontal
Side-by-side resizable panels using
ResizableDirection.Horizontal. Each ResizablePanel receives a DefaultSize percentage that determines its initial width. Drag the ResizableHandle between panels to redistribute space while respecting minimum and maximum constraints.Vertical
Stacked resizable panels using
ResizableDirection.Vertical. The vertical direction creates a top-to-bottom layout where the handle becomes a horizontal divider. This is useful for code editor layouts with a header/content split or terminal panels below the main editor.Three Panels
A layout with three resizable sections separated by two handles. Use
MinSize to set a minimum percentage each panel can shrink to, preventing panels from being collapsed to zero. The default sizes should add up to 100 percent across all panels in the group.Without Handle Icon
Set
WithHandle to false on ResizableHandle to render a clean divider line without the grip dots icon. The handle remains fully functional for drag resizing but presents a more minimal visual appearance, suitable for layouts where the handle should be subtle.IDE Layout
A real-world IDE-style layout combining nested
ResizablePanelGroup components. The outer group splits horizontally into a sidebar and main area, while the inner group splits the main area vertically into an editor and terminal. This demonstrates how panel groups can be composed for complex layouts.