SplitterComponent

23 Sep 20255 minutes to read

Represents the Angular Splitter Component

<ejs-splitter></ejs-splitter>

Properties

cssClass string

Specifies the CSS class names that defines specific user-defined
styles and themes to be appended on the root element of the Splitter.
It is used to customize the Splitter control.
One or more custom CSS classes can be specified to the Splitter.

Defaults to ’’

enableHtmlSanitizer boolean

Defines whether to allow the cross-scripting site or not.

Defaults to true

enablePersistence boolean

Enables or disables the persisting component’s state between page reloads.

Defaults to false

enableReversePanes boolean

Specifies the value whether splitter panes are reordered or not .

Defaults to true

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enabled boolean

Specifies boolean value that indicates whether the component is enabled or disabled.
The Splitter component does not allow to interact when this property is disabled.

Defaults to true

height string

Specifies the height of the Splitter component that accepts both string and number values.

Defaults to ‘100%’

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ’’

orientation Orientation

Specifies a value that indicates whether to align the split panes horizontally or vertically.

• Set the orientation property as “Horizontal” to create a horizontal splitter that aligns the panes left-to-right.
• Set the orientation property as “Vertical” to create a vertical splitter that aligns the panes top-to-bottom.

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

@Component({
    selector: 'app-root',
    template: '<ejs-splitter orientation="Vertical" height="100px"><e-panes><e-pane><ng-template #content><div class="content">Left pane</div></ng-template></e-pane><e-pane ><ng-template #content><div class="content">Right pane</div></ng-template></e-pane></e-panes></ejs-splitter>'
})
export class AppComponent {
}

Defaults to Horizontal

paneSettings PanePropertiesModel[]

Configures the individual pane behaviors such as content, size, resizable, minimum, maximum validation, collapsible and collapsed.

import { Component} from '@angular/core';
import { PanePropertiesModel } from '@syncfusion/ej2-angular-layouts';

@Component({
    selector: 'app-root',
    template: '<ejs-splitter [paneSettings]="paneSettings" height="100px"></ejs-splitter>'
})
export class AppComponent {
 public paneSettings: PanePropertiesModel[] = [
     {collapsible: false , content : 'Left pane' , size : '30%'},
     {collapsible : true , content : 'Right pane' , size : '75%'}
     ];
}

Defaults to []

separatorSize number

Specifies the size of the separator line for both horizontal or vertical orientation.
The separator is used to separate the panes by lines.

Defaults to null

width string

Specifies the width of the Splitter control, which accepts both string and number values as width.
The string value can be either in pixel or percentage format.

Defaults to ‘100%’

Methods

addPane

Allows you to add a pane dynamically to the specified index position by passing the pane properties.

Parameter	Type	Description
paneProperties	PanePropertiesModel	Specifies the pane’s properties that apply to new pane.
index	number	Specifies the index where the pane will be inserted.

Returns void

collapse

collapses corresponding pane based on the index is passed.

Parameter	Type	Description
index	number	Specifies the index value of the corresponding pane to be collapsed at initial rendering of splitter.

Returns void

destroy

Removes the control from the DOM and also removes all its related events.

Returns void

expand

expands corresponding pane based on the index is passed.

Parameter	Type	Description
index	number	Specifies the index value of the corresponding pane to be expanded at initial rendering of splitter.

Returns void

removePane

Allows you to remove the specified pane dynamically by passing its index value.

Parameter	Type	Description
index	number	Specifies the index value to remove the corresponding pane.

Returns void

Events

beforeCollapse EmitType<BeforeExpandEventArgs>

Triggers when before panes get collapsed.

beforeExpand EmitType<BeforeExpandEventArgs>

Triggers when before panes get expanded.

beforeSanitizeHtml EmitType<BeforeSanitizeHtmlArgs>

Event triggers before sanitize the value.

collapsed EmitType<ExpandedEventArgs>

Triggers when after panes get collapsed.

created EmitType<Object>

Triggers after creating the splitter component with its panes.

expanded EmitType<ExpandedEventArgs>

Triggers when after panes get expanded.

resizeStart EmitType<ResizeEventArgs>

Triggers when the split pane is started to resize.

resizeStop EmitType<ResizingEventArgs>

Triggers when the resizing of split pane is stopped.

resizing EmitType<ResizingEventArgs>

Triggers when a split pane is being resized.