SplitComponent (selector: 'as-split' / exportAs: 'asSplit')

Inputs Type Default Details
{{ prop.name }} {{ prop.type }} {{ prop.default }}
Outputs Value Details
{{ event.name }} {{ event.value }}
Access from TS class Type Details
{{ item.name }} {{ item.type }}


SplitAreaDirective (selector: 'as-split-area' / exportAs: 'asSplitArea')

@Input() Type Default Details
{{ prop.name }} {{ prop.type }} {{ prop.default }}


SplitGutterDirective (selector: '[asSplitGutter] ')

Used as structural directive (*asSplitGutter) to customize the gutter.

Mostly requires width: 100% and height: 100% in order to fill the whole gutter.

If the custom gutter is wider than the declared gutter size (using gutterSize input) the areas will overflow too. So attention is required to match the size of the gutter.

Template context property Type Details
{{ prop.name }} {{ prop.type }}


SplitGutterDragHandleDirective (selector: '[asSplitGutterDragHandle] ')

Used to declare an area inside asSplitGutter to be a drag handle

Can be declared on multiple elements which means all of them are drag handles.



SplitGutterExcludeFromDragDirective (selector: '[asSplitGutterExcludeFromDrag] ')

Used to declare an area inside asSplitGutter to be excluded from drag

Can be declared on multiple elements which means all of them are excluded from drag.

asSplitGutterExcludeFromDrag inside asSplitGutterDragHandle works as expected (all of the element is a handle except the excluded area)

asSplitGutterDragHandle inside asSplitGutterExcludeFromDrag is ignored and the whole element marked with exclude is excluded.



Theme

CSS variable Details
--as-{{ x.name }}

CSS classes

Split element classes Details
{{ x.name }}
Area element classes Details
{{ x.name }}
Gutter element classes Details
{{ x.name }}