Interface for a class Splitter
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.
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.
boolean
Defines whether to allow the cross-scripting site or not.
boolean
Enables or disables the persisting component’s state between page reloads.
boolean
Specifies the value whether splitter panes are reordered or not .
boolean
Enable or disable rendering component in right to left direction.
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.
string
Specifies the height of the Splitter component that accepts both string and number values.
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
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');
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");
number
Specifies the size of the separator line for both horizontal or vertical orientation. The separator is used to separate the panes by lines.
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.