Splitter | Neural UI v2

Usage

panes defines one entry per projected neu-splitter-pane, in the same order. size is a percentage; min and max are pixel constraints. Omitted sizes share the remaining percentage. orientation chooses side-by-side or stacked layout. Give the container a definite height for vertical layouts. Accept sizesChange by updating pane sizes to preserve a resize after a drag ends.

Examples

Try the behavior and open Code for the implementation.

Use arrow keys on the separator to resize by 2%.

Try and configure

Change the options and try the result. The generated template follows your configuration; Code contains the complete executable source.

Pane sizes: 40.0 / 60.0 % · Drag sessions: 0

First pane (%)

Minimum pane size (px)

First pane maximum (px, 0 = unlimited)

Nested splitter

<neu-splitter
  orientation="horizontal"
  [panes]="panes()"
  (sizesChange)="accept($event)"
  (resizeStart)="starts.update(increment)"
  (resize)="resizes.update(increment)"
>
  <neu-splitter-pane>
    <section>Folders</section>
  </neu-splitter-pane>
  <neu-splitter-pane>
    <section>Details</section>
  </neu-splitter-pane>
</neu-splitter>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

import { signal } from '@angular/core';

export const panes = signal([
  {
    "size": 40,
    "min": 40
  },
  {
    "size": 60,
    "min": 40
  }
]);

Data, callback and structured configuration inputs

import type { NeuSplitterPane } from '@neural-ui/core/splitter';

readonly panes = signal<readonly NeuSplitterPane[]>([
  {
    "size": 40,
    "min": 40
  },
  {
    "size": 60,
    "min": 40
  }
]);

Data and content

sizesChange proposes percentages in pane order. resizeStart reports the beginning of a pointer drag and resize reports valid pointer previews. Keyboard resizing emits sizesChange. Pane content is projected as neu-splitter-pane elements; that tag is a content slot, not an exported Angular component.

Accessibility and keyboard

Each handle is a focusable separator with orientation and current/minimum/maximum values. Left/Right resize horizontal panes and Up/Down resize vertical panes by 2%. Horizontal movement respects RTL. Ensure pane constraints leave usable space for the content.

Key	Action
`Tab`	Focus an enabled separator handle.
`ArrowLeft / ArrowRight`	Resize horizontal panes by 2%, respecting constraints and RTL.
`ArrowUp / ArrowDown`	Resize vertical panes by 2%, respecting their constraints.

API

Inputs and Outputs match the pinned package. Named types link to their definitions; each supported Template has an executable example.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`orientation`	`NeuSplitterDirection`	`'horizontal'`	`[orientation]`	horizontal is side-by-side; vertical is stacked.
`panes`	`readonly NeuSplitterPane[]`	`[]`	`[panes]`	Pane percentages and pixel min/max constraints, in projection order.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Name	Payload	Template binding	Description
`resize`	`readonly number[]`	`(resize)="onResize($event)"`	Reports a valid pointer resize preview.
`resizeStart`	`readonly number[]`	`(resizeStart)="onResizeStart($event)"`	Reports applied sizes at pointer drag start.
`sizesChange`	`readonly number[]`	`(sizesChange)="onSizesChange($event)"`	Proposes pane percentages; update panes to accept them.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

Name	Mechanism	Contract
`neu-splitter-pane` Adjacent pane content View example	Content projection Provide one neu-splitter-pane per panes entry, in the same order. The tag is a projection slot.	`<ng-content select="neu-splitter-pane" />` Context used: `—`

Each example demonstrates a different template. Switch between Demo and Code to inspect its implementation, imports and state.

Pane content

neu-splitter-pane

Public Types

Open a type to inspect its definition and interface fields.

NeuSplitterDirectionTypeScript

import type { NeuSplitterDirection } from '@neural-ui/core/splitter';

// Public declaration (reference only)
export type NeuSplitterDirection = 'horizontal' | 'vertical';

NeuSplitterPaneTypeScript

import type { NeuSplitterPane } from '@neural-ui/core/splitter';

// Public declaration (reference only)
export interface NeuSplitterPane {
  max?: number;
  min?: number;
  size?: number;
}

Styles and tokens

Use public tokens for spacing, surface, text and focus. Check projected content and controls in both themes and at narrow widths.

Specific tokens

Token	Purpose	State / variant	Default / source	Fallback
`--neu-splitter-handle-size`	Inherited theme value used by this component	Field surface	`4px`Root declaration	`No token alias`

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-focus-ring`	Normal keyboard-focus ring	Shared by other Core consumers; scope the override.	`0 0 0 var(--neu-focus-ring-width) rgba(0, 122, 255, 0.15)`
`--neu-primary`	Brand color for active controls and emphasis	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-border-color`	Inherited theme value used by this component	Shared by other Core consumers; scope the override.	`var(--neu-border)`
`--neu-text-secondary`	Inherited theme value used by this component	Shared by other Core consumers; scope the override.	`var(--neu-text-muted)`

Related components

Combine these components to build the surrounding interface.