Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
69
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
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.

Split

PropTypeDefault
direction
The split direction
'horizontal' | 'vertical''horizontal'
unit
The unit you want to specify area sizes
'percent' | 'pixel''percent'
gutterSize
Gutters's size (dragging elements) in pixels
number5
gutterStep
Gutter step while moving in pixels
number1
restrictMove
Limit gutter move to adjacent areas only
booleanfalse
useTransition
Add transition when toggling visibility or size changes
booleanfalse
disabled
Disable the dragging feature
booleanfalse
dir
Directionality of the areas
'ltr' | 'rtl''ltr'
gutterDblClickDuration
Milliseconds to detect a double click on a gutter
number0
EventDescription
dragStartEvent emitted when drag starts
dragEndEvent emitted when drag ends
gutterClickEvent emitted when user clicks on a gutter
gutterDblClickEvent emitted when user double clicks on a gutter
transitionEndEvent emitted when transition ends

Split Pane

PropTypeDefault
order
Order of the area
numbernull
size
Size of the area in selected unit (percent/pixel)
numbernull
minSize
Minimum pixel or percent size
numbernull
maxSize
Maximum pixel or percent size
numbernull
lockSize
Lock area size, same as minSize=maxSize=size
booleanfalse
visible
Hide area visually but still present in the DOM
booleantrue
withHandle
Show handle (three dots) on the gutter adjacent to this pane
booleanfalse