Spartans get ready! v1 is coming!

We are very close to our first stable release. Expect more announcements in the coming weeks. v1 was made possible by our partner Zerops.

Resizable

A group of resizable horizontal and vertical panels.

One

Two

Three

import { Component } from '@angular/core';
import { HlmResizableImports } from '@spartan-ng/helm/resizable';

@Component({
	selector: 'spartan-resizable-example',
	imports: [HlmResizableImports],
	template: `
		<hlm-resizable-group class="h-[200px] w-[500px] max-w-md rounded-lg border">
			<hlm-resizable-panel>
				<div class="flex h-full items-center justify-center p-6">One</div>
			</hlm-resizable-panel>
			<hlm-resizable-handle />
			<hlm-resizable-panel>
				<hlm-resizable-group direction="vertical">
					<hlm-resizable-panel>
						<div class="flex h-full items-center justify-center p-6">
							<span class="font-semibold">Two</span>
						</div>
					</hlm-resizable-panel>
					<hlm-resizable-handle />
					<hlm-resizable-panel>
						<div class="flex h-full items-center justify-center p-6">
							<span class="font-semibold">Three</span>
						</div>
					</hlm-resizable-panel>
				</hlm-resizable-group>
			</hlm-resizable-panel>
		</hlm-resizable-group>
	`,
})
export class ResizablePreviewComponent {}

Installation

npx nx g @spartan-ng/cli:ui resizable

Usage

import { HlmResizableImports } from '@spartan-ng/helm/resizable';

<hlm-resizable-group class="h-[200px] w-[500px] max-w-md rounded-lg border">
			<hlm-resizable-panel>
				<div class="flex h-full items-center justify-center p-6">One</div>
			</hlm-resizable-panel>
			<hlm-resizable-handle />
			<hlm-resizable-panel>
				<hlm-resizable-group direction="vertical">
					<hlm-resizable-panel>
						<div class="flex h-full items-center justify-center p-6">
							<span class="font-semibold">Two</span>
						</div>
					</hlm-resizable-panel>
					<hlm-resizable-handle />
					<hlm-resizable-panel>
						<div class="flex h-full items-center justify-center p-6">
							<span class="font-semibold">Three</span>
						</div>
					</hlm-resizable-panel>
				</hlm-resizable-group>
			</hlm-resizable-panel>
		</hlm-resizable-group>

Examples

Vertical

Use the direction prop to set the direction of the resizable panels.

Header

Content

import { Component } from '@angular/core';
import { HlmResizableImports } from '@spartan-ng/helm/resizable';

@Component({
	selector: 'spartan-resizable-vertical-preview',
	imports: [HlmResizableImports],
	template: `
		<hlm-resizable-group class="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]" direction="vertical">
			<hlm-resizable-panel defaultSize="25">
				<div class="flex h-full items-center justify-center p-6">
					<span class="font-semibold">Header</span>
				</div>
			</hlm-resizable-panel>
			<hlm-resizable-handle />
			<hlm-resizable-panel defaultSize="75">
				<div class="flex h-full items-center justify-center p-6">
					<span class="font-semibold">Content</span>
				</div>
			</hlm-resizable-panel>
		</hlm-resizable-group>
	`,
})
export class ResizableVerticalPreview {}

Handle

You can set or hide the handle by using the withHandle prop on the hlm-resizable-handle component.

Sidebar

Content

import { Component } from '@angular/core';
import { HlmResizableImports } from '@spartan-ng/helm/resizable';

@Component({
	selector: 'spartan-resizable-handle-preview',
	imports: [HlmResizableImports],
	template: `
		<hlm-resizable-group class="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]">
			<hlm-resizable-panel defaultSize="25">
				<div class="flex h-full items-center justify-center p-6">
					<span class="font-semibold">Sidebar</span>
				</div>
			</hlm-resizable-panel>
			<hlm-resizable-handle withHandle />
			<hlm-resizable-panel defaultSize="75">
				<div class="flex h-full items-center justify-center p-6">
					<span class="font-semibold">Content</span>
				</div>
			</hlm-resizable-panel>
		</hlm-resizable-group>
	`,
})
export class ResizableHandlePreview {}

Brain API

BrnResizableGroup

Selector: brn-resizable-group, [brnResizableGroup]

ExportAs: brnResizableGroup

Inputs

Prop	Type	Default	Description
id	string	`brn-resizable-group-${++nextId}`	The id of the BrnResizableGroup
direction	'horizontal' \| 'vertical'	horizontal	Group orientation
layout	number[]	[]	Resize panel group to the specified layout ([1 - 100, ...]).

Outputs

Prop	Type	Default	Description
dragStart	void	-	event when resize starts
dragEnd	void	-	event when resize ends
layoutChanged	number[]	-	Called when group layout changes
layoutChanged	number[]	[]	Resize panel group to the specified layout ([1 - 100, ...]).

BrnResizableHandle

Selector: brn-resizable-handle, [brnResizeHandle]

ExportAs: brnResizableHandle

Inputs

Prop	Type	Default	Description
withHandle	unknown	false	Whether a visual handle is rendered inside the separator.
disabled	unknown	false	Whether the handle is disabled (not interactive).

BrnResizablePanel

Selector: brn-resizable-panel, [brnResizablePanel]

ExportAs: brnResizablePanel

Inputs

Prop	Type	Default	Description
id	string	`brn-resizable-panel-${++nextId}`	Unique ID for the panel.
defaultSize	unknown	undefined	The default size of the panel (percentage of container space). - `undefined` → group decides initial size. - Number → interpreted as percentage (0–100).
minSize	unknown	0	The minimum size this panel can shrink to (percentage).
maxSize	unknown	100	The maximum size this panel can grow to (percentage).
collapsible	unknown	true	Whether this panel can be collapsed entirely.

Helm API

HlmResizableGroup

Selector: hlm-resizable-group

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmResizableHandle

Selector: hlm-resizable-handle

ExportAs: hlmResizableHandle

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmResizablePanel

Selector: hlm-resizable-panel

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

Scroll Area

Radio Group