Splitter

New

A flexible workspace with room for everything. Resize panels to fit the task at hand.

Horizontal & verticalNested panelsKeyboard accessible

Horizontal and controlled

Drag the divider or focus it and use Left/Right. Minimum sizes keep both panels usable.

OVERVIEW

Space to do your best work.

Keep your project navigation close and give your ideas the room they need.

Drag the handle to make room for your work.

Vertical

Stack panels and resize with Up/Down. Home and End move to the allowed limits.

PREVIEW

Your next big idea

A clear view of what you are building.

OUTPUT

All changes saved. Ready for the next step.

Nested

Combine independent splitters for an editor-style layout.

EDITOR

Build something thoughtful.

CONSOLE

Workspace ready.

Usage and API

Import AvSplitter and AvSplitterPanel from avero-ui. Give the container an explicit height.

HTML

<av-splitter inputId="workspace" style="height: 300px"
  [(panelSizes)]="sizes" [minSizes]="[15, 25]"
  [separatorLabels]="['Resize project navigation']"
  (onResizeEnd)="resized($event)">
  <ng-template avSplitterPanel>Navigation</ng-template>
  <ng-template avSplitterPanel>Workspace</ng-template>
</av-splitter>

Panels. Supply direct child ng-template avSplitterPanel templates, or use #panel references without the directive import. Use one style per splitter. Nest splitters inside panel templates and give each splitter a unique inputId.

Sizes. panelSizes accepts relative weights and supports [(panelSizes)]. Defaults to equal panels. minSizes sets percentage minimums; impossible totals above 100 are proportionally reduced. Gutters are excluded from the available panel space.

Interaction. layout is horizontal or vertical. disabled locks user resizing. step controls keyboard increments in percentage points; gutterSize sets the divider width in pixels (minimum 4). onResizeStart and onResizeEnd expose sizes and originalEvent. Pointer cancellation ends resizing at the current sizes.

Accessibility. Focusable separators expose orientation, limits and current size. Customize separatorLabels for your workspace. Use arrow keys to resize, Home for the minimum and End for the maximum.