Splitter is a layout user interface (UI) control that has resizable and collapsible split panes. The container can be split into multiple panes, which are oriented horizontally or vertically. The separator (divider) splits the panes and resizes and expands/collapses the panes. The splitter is placed inside the split pane to make a nested layout user interface.
<div id="splitter">
<div> Left Pane </div>
<div> Center Pane </div>
<div> Right Pane </div>
</div>
<script>
var splitterObj = new Splitter({ width: '300px', height: '200px'});
splitterObj.appendTo('#splitter');
</script>
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 ”
boolean
Defines whether to allow the cross-scripting site or not.
Defaults to true
boolean
Enables or disables the persisting component’s state between page reloads.
Defaults to false
boolean
Specifies the value whether splitter panes are reordered or not .
Defaults to true
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
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
string
Specifies the height of the Splitter component that accepts both string and number values.
Defaults to ‘100%’
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
Specifies a value that indicates whether to align the split panes horizontally or vertically.
<div id="splitter">
<div> Left pane</div>
<div> Right pane</div>
</div>
import { Splitter } from '@syncfusion/ej2-layouts';
let splitObj1: Splitter = new Splitter({
height: '100px',
orientation : 'Vertical'
});
splitObj1.appendTo('#splitter');
Defaults to Horizontal
Configures the individual pane behaviors such as content, size, resizable, minimum, maximum validation, collapsible and collapsed.
<div id="splitter"></div>
import { Splitter } from "@syncfusion/ej2-layouts";
let splitObj1: Splitter = new Splitter({
height: "100px",
paneSettings: [
{ size: "25%", collapsible: "60px", content: "Left pane" },
{ size: "50%", collapsible: "60px", content: "Right pane" }
]
});
splitObj1.appendTo("#splitter");
Defaults to []
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
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%’
Adds the handler to the given event listener.
Parameter | Type | Description |
---|---|---|
eventName | string |
A String that specifies the name of the event |
handler | Function |
Specifies the call to run when the event occurs. |
Returns void
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
Appends the control within the given HTML element
Parameter | Type | Description |
---|---|---|
selector (optional) | string | HTMLElement |
Target element where control needs to be appended |
Returns void
Adding unload event to persist data when enable persistence true
Returns void
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
When invoked, applies the pending property changes immediately to the component.
Returns void
Removes the control from the DOM and also removes all its related events.
Returns void
Removing unload event to persist data when enable persistence true
Returns void
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
Returns the persistence data for component
Returns any
Returns the route element of the component
Returns HTMLElement
Handling unload event to persist data when enable persistence true
Returns void
Applies all the pending property changes and render the component again.
Returns void
Removes the handler from the given event listener.
Parameter | Type | Description |
---|---|---|
eventName | string |
A String that specifies the name of the event to remove |
handler | Function |
Specifies the function to remove |
Returns void
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
Dynamically injects the required modules to the component.
Parameter | Type | Description |
---|---|---|
moduleList | Function[] |
? |
Returns void
EmitType<BeforeExpandEventArgs>
Triggers when before panes get collapsed.
EmitType<BeforeExpandEventArgs>
Triggers when before panes get expanded.
EmitType<BeforeSanitizeHtmlArgs>
Event triggers before sanitize the value.
Triggers when after panes get collapsed.
EmitType<Object>
Triggers after creating the splitter component with its panes.
Triggers when after panes get expanded.
Triggers when the split pane is started to resize.
Triggers when the resizing of split pane is stopped.
Triggers when a split pane is being resized.