Horizontal split
Splits content that is displayed horizontally in a panel into two or more
panes.
Data binding
Set or modify the data binding for the view in the General properties tab. The Horizontal split view can be bound to aString
variable.Configuration properties
Under Configuration, set or modify the appearance and behavior properties for the view.
- Screen size
- A configuration property that has the Screen Sizes icon
beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value.
- Theme definitions
- Theme definitions specify the colors and styles for a view and determine its appearance. You can preview the look and feel of views in the theme editor. See Themes.
The appearance configuration properties for the Horizontal split view are shown in the following
table:
Appearance configuration property | Description | Data type |
---|---|---|
Height
![]() |
The default setting is 100% of its container. The container must have an explicitly set height. | String |
Pane specs | Specifies various appearance variables for each pane, such as the size, collapsedSize, splitterThickness, and handleLocation. | SplitPaneSpec[] |
Resizable panes
![]() |
Allows the panes to be resized by dragging the edges horizontally. | Boolean |
Events
Set or modify the event handlers for the view in the Events properties. You can set events to be triggered programmatically or when a user interacts with the view. For information about how to define and code events, see User-defined events.The Horizontal split view has the following types of event handlers:
- On load: Activated when the view loads, for
example:
me.collapsePane(me.getPaneCount() - 1)
- On pane collapsed: Activated when a pane collapses, for
example:
${PaneStatus}.setText("Last Pane Collapsed: " + paneIndex);
- On pane expanded: Activated when a pane expands, for
example:
${PaneStatus}.setText("Last Pane Expanded: " + paneIndex);
- On pane resized: Activated when the pane is
resized, for
example:
${PaneStatus}.setText("Last Pane Resized: " + paneIndex + " with " + changedSize + "px");
Depending on the specific event, you can use JavaScript logic to modify the effects of the view.
Methods
For detailed information on the available methods for Horizontal split, see the Horizontal split JavaScript API.
Additional resources
For information about how to create a coach or page, see Building coaches.
For information about standard properties
(General, Configuration,
Positioning, Visibility, and HTML
Attributes), see View properties.