Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
68
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Purchase

Split Pane

Split creates a resizable multi-pane layout for workspaces where users need to drag gutters between panes. Use ngs-split with multiple ngs-split-pane regions when two or more panes must be manually resized.

Good examples include editors, IDE-like screens, analytics workspaces, master-detail-detail layouts, source and preview views, inspector plus canvas plus logs, and other dense work areas. Split supports horizontal or vertical direction, nested splits, percent or pixel sizing, min and max sizes, locked panes, hidden panes, pane order, optional dotted gutter handles, restricted gutter movement, and drag lifecycle events.

Do not use Split for ordinary responsive layout, a static two-column admin page, a single resizable box, side navigation shells, temporary side overlays, local page sections, table column resizing, or image resizing. Use TailwindCSS grid/flex, ResizableContainer, Sidenav, Sidebar, Drawer, Panel, table features, or ImageResizer when those match the job better. Give the parent a stable height and width.

The NgStarter Angular Split component lets you create a resizable multi-pane layout with draggable gutters between panes. Use ngs-split with multiple ngs-split-pane regions when a workspace needs two or more panes that users can manually resize. It includes examples for Basic Split Pane, Split Pane with Handle, Vertical Split Pane with Handle, and Split Pane with 3 Columns and Minimum Sizes.

Basic Split Pane

Use basic Split when a workspace needs multiple panes that users can resize by dragging gutters.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eodolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eodolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Split Pane with Handle

Add handles when gutters need a visible drag affordance.

Left Column
Right Column

Vertical Split Pane with Handle

Use vertical direction when panes should resize top to bottom instead of side by side.

Top Pane
Bottom Pane

Split Pane with 3 Columns and Minimum Sizes

Use min and max sizes when panes must stay usable while users resize the workspace.

Left Column
(min: 20%)
Middle Column
(flexible)
Right Column
(min: 20%)

Split Pane with Restricted Move

Use restricted movement when a gutter should resize only the adjacent panes.

Left Column
Middle Column
Right Column