Resizable

A group of resizable horizontal and vertical panels, powered by ngx-resizable-panels and styled with Spartan/UI.

About

The Resizable component suite allows you to create flexible, interactive layouts that users can adjust. It is ideal for complex dashboards, IDE-like interfaces, and split-screen views. It supports both horizontal and vertical directions and nested groups.

Installation

Run the following command to install the resizable component:

Usage

resizable-usage.ts

Default (Nested)

A complex layout combining horizontal and vertical resizable panels.

Sidebar
Header

Main Editor View

Drag handles to resize workspaces

Vertical Stack

Use the direction="vertical" input to stack panels vertically.

Vertical Stack Layout
Navigation
Main Workspace
Logs & Console

Handle Options

Visible handles using withHandle or standard invisible interactive areas.

Visible Handles (withHandle)

Sidebar
Content Area

Hidden Handles (Standard)

Panel Left
Panel Right

Tip: Standard handles are invisible but still interactive.

API Reference

Helm API

Resizable components use three main elements to build layouts.

ComponentDescription
hlm-resizable-group Root container. Inputs: direction ('horizontal' | 'vertical').
hlm-resizable-panel Individual panel. Inputs: defaultSize, minSize, maxSize.
hlm-resizable-handle Draggable handle. Inputs: withHandle (boolean).