Layout

Resizable

Resizable panel groups and panels.

Preview

A preview of the Resizable component with interactive controls.

Preview Code
Interactive

Installation

Add the Resizable component to your project.

Bash
ng g @ng-cn/core:c resizable

Usage

Import and use the Resizable component in your Angular application.

Template TypeScript
template.html
<ResizablePanelGroup direction="horizontal" class="min-h-[200px] max-w-md rounded-lg border">
  <ResizablePanel [defaultSize]="50">
    <div class="flex h-full items-center justify-center p-6">
      <span class="font-semibold">One</span>
    </div>
  </ResizablePanel>
  <ResizableHandle withHandle />
  <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 withHandle />
      <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>

Examples

Explore different variations and use cases for the Resizable component.

Basic

Preview Code
Interactive

API Reference

Props
Prop Type Default Description
direction 'horizontal' | 'vertical' 'horizontal' The direction of the panels.
defaultSize number — The default size of the panel as a percentage.
withHandle boolean false Whether to show a drag handle.