Resizable

Accessible resizable panel groups with horizontal and vertical layouts, handles, nested groups, constraints, keyboard resizing, and RTL support.

Preview

Navigation

Canvas

Inspector

Usage

import { FrResizableModule } from '@frame-ui-ng/components/resizable';

HTML

<div frResizablePanelGroup aria-label="Inbox split view">
  <section frResizablePanel [defaultSize]="32" [minSize]="20">Inbox</section>
  <div frResizableHandle></div>
  <section frResizablePanel [defaultSize]="68" [minSize]="30">Message preview</section>
</div>

Examples

Basic

Use a horizontal panel group for common master-detail and sidebar layouts.

Inbox

Message preview

Vertical

Switch orientation when users need to resize stacked regions such as toolbars, editors, and logs.

Toolbar

Report body

Handle

Add withHandle to show a visible drag affordance while keeping the full handle area easy to target.

Filters

Results

Nested

Nest panel groups to combine sidebar resizing with independently resizable editor regions.

Project list

Editor

Activity log

Panel constraints

Use minSize and maxSize to constrain panels. If minSize is omitted, a panel can collapse to 0% and expand again from the handle.

Optional nav

Pinned filters

Content

RTL

Horizontal resizing accounts for RTL direction so keyboard and pointer movement feel natural.

القائمة

المحتوى

Custom Styling

Scope resizable tokens to a panel group when a split view needs a stronger container treatment or more visible drag affordance.

Queue

Review board

Token Inspector

Hover the resizable group, panel, or handle to inspect the tokens behind borders, surfaces, panel padding, handle affordances, and focus treatment.

Sidebar

Content

Design Tokens

Use these CSS custom properties to tune the resizable container, panel padding, handle sizing, visible affordance, focus ring, and motion.

SCSS

--frame-resizable-border: var(--frame-border);
--frame-resizable-radius: var(--frame-radius-lg);
--frame-resizable-bg: var(--frame-surface);
--frame-resizable-color: var(--frame-foreground);
--frame-resizable-panel-padding: 1rem;
--frame-resizable-panel-min-size: 0;
--frame-resizable-handle-size: 0.625rem;
--frame-resizable-handle-hit-size: 1rem;
--frame-resizable-handle-bg: transparent;
--frame-resizable-handle-hover-bg: color-mix(in srgb, var(--frame-primary) 16%, transparent);
--frame-resizable-handle-active-bg: color-mix(in srgb, var(--frame-primary) 24%, transparent);
--frame-resizable-handle-border: var(--frame-border);
--frame-resizable-handle-indicator-size: 2rem;
--frame-resizable-handle-indicator-thickness: 0.25rem;
--frame-resizable-handle-indicator-bg: var(--frame-border);
--frame-resizable-handle-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 28%, transparent);
--frame-resizable-transition-duration: 150ms;
--frame-resizable-transition-easing: ease;