Basic
Use a horizontal panel group for common master-detail and sidebar layouts.
Icons
Icons by @ng-icons/tabler-icons
The component library does not provide icons.
Component Blueprint
Resizable
Accessible resizable panel groups with horizontal and vertical layouts, handles, nested groups, constraints, keyboard resizing, and RTL support.
02 Usage
TS
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>03 Examples
Vertical
Switch orientation when users need to resize stacked regions such as toolbars, editors, and logs.
Handle
Add withHandle to show a visible drag affordance while keeping the full handle area easy to target.
Nested
Nest panel groups to combine sidebar resizing with independently resizable editor regions.
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.
RTL
Horizontal resizing accounts for RTL direction so keyboard and pointer movement feel natural.
04 Custom Styling
Scope resizable tokens to a panel group when a split view needs a stronger container treatment or more visible drag affordance.
05 Token Inspector
Hover the resizable group, panel, or handle to inspect the tokens behind borders, surfaces, panel padding, handle affordances, and focus treatment.
06 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;