Class sap.ui.layout.ResponsiveSplitterModule: sap/ui/layout/ResponsiveSplitter

extends Control

A responsive splitter which divides the application into several areas.

Overview

The responsive splitter layout structures complex applications into defined areas. These areas may be resizable and are either distributed across one or multiple screen areas, some of which may also be off-canvas.

The control is intended for developing administrative tools and applications.

Structure

The responsive splitter holds the following hierarchy of containers and controls:

  • Pane Container - holds one or more Split Panes and determines the pane orientation. The pane which is stored in rootPaneContainer holds all other pane containers and split panes.
  • Split Pane - independent containers that may interact with one another. Each pane can hold only one control.

Usage

When to use

  • The application has to display several areas side by side that must be resizable.
  • The application must work on a range of different devices in a responsive manner.

Responsive Behavior

  • As soon as views are in the off-canvas mode, the pagination bar at the bottom of the application allows the user to switch between them.
  • On touch-enabled devices, the splitters show explicit handles with larger touch areas.
  • Double-clicking on a splitter will collapse or expand it back to its original position.

Since: 1.38.
Constructor Summary
new sap.ui.layout.ResponsiveSplitter(sId?, mSettings?)Constructor for a new ResponsiveSplitter.
Events borrowed from class sap.ui.core.Control
Method Summary
sap.ui.layout.ResponsiveSplitter.extend(sClassName, oClassInfo?, FNMetaImpl?)Creates a new subclass of class sap.ui.layout.ResponsiveSplitter with name sClassName and enriches it with the information contained in oClassInfo.
sap.ui.layout.ResponsiveSplitter.getMetadata()Returns a metadata object for class sap.ui.layout.ResponsiveSplitter.
destroyRootPaneContainer()Destroys the rootPaneContainer in the aggregation rootPaneContainer.
getDefaultPane()ID of the element which is the current target of the association defaultPane, or null.
getHeight()Gets current value of property height.
getRootPaneContainer()Gets content of aggregation rootPaneContainer.
getWidth()Gets current value of property width.
setDefaultPane(oDefaultPane)Sets the associated defaultPane.
setHeight(sHeight)Sets a new value for property height.
setRootPaneContainer(oRootPaneContainer)Sets the aggregated rootPaneContainer.
setWidth(sWidth)Sets a new value for property width.
Constructor Detail
new sap.ui.layout.ResponsiveSplitter(sId?, mSettings?)

Constructor for a new ResponsiveSplitter.

Accepts an object literal mSettings that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject for a general description of the syntax of the settings object.

The supported settings are:

  • Properties

    • width : sap.ui.core.CSSSize (default: 100%)
    • height : sap.ui.core.CSSSize (default: 100%)

  • Aggregations

  • Associations

    • defaultPane : (sap.ui.core.ID | sap.ui.layout.SplitPane)

In addition, all settings applicable to the base type sap.ui.core.Control can be used as well.

Parameters:
stringsId?ID for the new control, generated automatically if no ID is given
objectmSettings?Initial settings for the new control
Method Detail
sap.ui.layout.ResponsiveSplitter.extend(sClassName, oClassInfo?, FNMetaImpl?): function

Creates a new subclass of class sap.ui.layout.ResponsiveSplitter with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.ui.core.Control.extend.

Parameters:
stringsClassNameName of the class being created
objectoClassInfo?Object literal with information about the class
functionFNMetaImpl?Constructor function for the metadata object; if not given, it defaults to sap.ui.core.ElementMetadata
Returns:
functionCreated class / constructor function
sap.ui.layout.ResponsiveSplitter.getMetadata(): sap.ui.base.Metadata
Returns a metadata object for class sap.ui.layout.ResponsiveSplitter.
Returns:
sap.ui.base.MetadataMetadata object describing this class
destroyRootPaneContainer(): sap.ui.layout.ResponsiveSplitter
Destroys the rootPaneContainer in the aggregation rootPaneContainer.
Returns:
sap.ui.layout.ResponsiveSplitterReference to this in order to allow method chaining
getDefaultPane(): sap.ui.core.ID
ID of the element which is the current target of the association defaultPane, or null.
Returns:
sap.ui.core.ID
getHeight(): sap.ui.core.CSSSize

Gets current value of property height.

The height of the control

Default value is 100%.

Returns:
sap.ui.core.CSSSizeValue of property height
getRootPaneContainer(): sap.ui.layout.PaneContainer

Gets content of aggregation rootPaneContainer.

The root PaneContainer of the ResponsiveSplitter

Returns:
sap.ui.layout.PaneContainer
getWidth(): sap.ui.core.CSSSize

Gets current value of property width.

The width of the control

Default value is 100%.

Returns:
sap.ui.core.CSSSizeValue of property width
setDefaultPane(oDefaultPane): sap.ui.layout.ResponsiveSplitter
Sets the associated defaultPane.
Parameters:
sap.ui.core.ID|sap.ui.layout.SplitPaneoDefaultPaneID of an element which becomes the new target of this defaultPane association; alternatively, an element instance may be given
Returns:
sap.ui.layout.ResponsiveSplitterReference to this in order to allow method chaining

Sets a new value for property height.

The height of the control

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 100%.

Parameters:
sap.ui.core.CSSSizesHeightNew value for property height
Returns:
sap.ui.layout.ResponsiveSplitterReference to this in order to allow method chaining
setRootPaneContainer(oRootPaneContainer): sap.ui.layout.ResponsiveSplitter
Sets the aggregated rootPaneContainer.
Parameters:
sap.ui.layout.PaneContaineroRootPaneContainerThe rootPaneContainer to set
Returns:
sap.ui.layout.ResponsiveSplitterReference to this in order to allow method chaining

Sets a new value for property width.

The width of the control

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 100%.

Parameters:
sap.ui.core.CSSSizesWidthNew value for property width
Returns:
sap.ui.layout.ResponsiveSplitterReference to this in order to allow method chaining