Splitter Properties

border

Border around the area enclosed by the Splitter.

Value	Example of the Visualization	Description
areadivider		A three-dimensional border is displayed.
closure		A small, simple border is displayed.
closurelight		A small, simple border is displayed that is lighter than closure.
none		No border is displayed.

collapseDirection

This property enables you to expand and collapse a page of the Splitter.

Value	Example of the Visualization	Description
toBegin		The sash ( Sash) has a button with an arrow symbol pointing to the left (see figure). If you choose the button, the sash is collapsed to the left so that the left area of the Splitter is no longer visible. The right area of the Splitter, on the other hand, is expanded to the full width and height of the UI element. With horizontal orientation of the sash, the behavior is the same. The arrow symbol of the button points upwards and the sash is collapsed upwards. The bottom area of the Splitter is expanded to the full height of the UI element. If a sash is pulled to the end of the area, the direction of the arrow changes. If you choose the button again, the sash is returned to its original position. The arrow points in the original closing direction again. It is possible to move the sash.
toEnd		The sash has a button with an arrow symbol pointing to the right (see figure). If you choose the button, the sash is collapsed to the right so that the right area of the Splitter is no longer visible. The left area of the Splitter, on the other hand, is expanded to the full width of the UI element. With horizontal orientation of the sash, the behavior is the same. The arrow symbol of the button points downwards and the sash is collapsed downwards. The top area of the Splitter is expanded to the full height of the UI element. If a sash is pulled to the end of the area, the direction of the arrow changes. If you choose the button again, the sash is returned to its original position. The arrow points in the original closing direction again. It is possible to move the sash.
none		You can only move the sash; you cannot expand it, the sash does not have a button.

Value

Example of the Visualization

Description

toBegin

collapseDirection=toBegin

The sash ( Sash) has a button with an arrow symbol pointing to the left (see figure). If you choose the button, the sash is collapsed to the left so that the left area of the Splitter is no longer visible. The right area of the Splitter, on the other hand, is expanded to the full width and height of the UI element.

With horizontal orientation of the sash, the behavior is the same. The arrow symbol of the button points upwards and the sash is collapsed upwards. The bottom area of the Splitter is expanded to the full height of the UI element.

If a sash is pulled to the end of the area, the direction of the arrow changes. If you choose the button again, the sash is returned to its original position. The arrow points in the original closing direction again.

It is possible to move the sash.

toEnd

collapseDirection=toEnd

The sash has a button with an arrow symbol pointing to the right (see figure). If you choose the button, the sash is collapsed to the right so that the right area of the Splitter is no longer visible. The left area of the Splitter, on the other hand, is expanded to the full width of the UI element.

With horizontal orientation of the sash, the behavior is the same. The arrow symbol of the button points downwards and the sash is collapsed downwards. The top area of the Splitter is expanded to the full height of the UI element.

If a sash is pulled to the end of the area, the direction of the arrow changes. If you choose the button again, the sash is returned to its original position. The arrow points in the original closing direction again.

It is possible to move the sash.

none

collapseDirection=none

You can only move the sash; you cannot expand it, the sash does not have a button.

height

Height of the UI element.

Note

The height of the Splitter must be specified as a percentage or in pixels.

isCollapsed

With this property you can specify whether the Splitter is collapsed or not. If it is collapsed, it is collapsed in the direction defined in property collapseDirection. The value of the isCollapsed property is adjusted automatically when the user expands or collapses an area in the Splitter. The sashPosition property, which is adjusted when the sash is moved, is only adjusted here if a splitter area is expanded, not if it is collapsed.

Note

To use the isCollapsed property, the collapseDirection property must not be set to none.

Value	Description
true	The Splitter is collapsed in the direction defined in the collapseDirection property. The value of the sashPosition property is not adjusted when the sash is moved. The sash is always displayed at the border of the Splitter, regardless of the value you have specified in sashPosition. Note If the user expands the collapsed area of the Splitter again, the sash is set to the specified sashPosition.
false	Initial Value The Splitter is expanded in the direction defined in the collapseDirection property. The sash of the Splitter is displayed and the isCollapsed property is ignored. The sash is displayed in the sashPosition specified.

Value

Description

true

The Splitter is collapsed in the direction defined in the collapseDirection property. The value of the sashPosition property is not adjusted when the sash is moved. The sash is always displayed at the border of the Splitter, regardless of the value you have specified in sashPosition.

Note

If the user expands the collapsed area of the Splitter again, the sash is set to the specified sashPosition.

false

Initial Value

The Splitter is expanded in the direction defined in the collapseDirection property. The sash of the Splitter is displayed and the isCollapsed property is ignored. The sash is displayed in the sashPosition specified.

For more information about the IS_COLLAPSED event parameter, see Splitter Events.

orientation

Alignment of the Splitter: horizontal or vertical.

Value	Example of the Visualization	Description
horizontal		Splitter is displayed horizontally.
vertical		Splitter is displayed vertically.

sashDesign

Visualization of the sash ( Sash)

Value	Example of the Visualization	Description
standard		Initial Value
contour		The color of the sash is darker than the standard display.

sashPositionMode

Type of sash display in a Splitter, depends on the value specified for sashPosition.

Value	Example of the Visualization	Description
absoluteFromBegin		The position of the sash is calculated as an absolute value in pixels (see sashPosition) starting from the beginning of the Splitter.
absoluteFromEnd		The position of the sash is calculated as an absolute value in pixels (see sashPosition) starting from the end of the Splitter.
percent		The position of the sash is calculated as a percentage (see sashPosition) starting from the beginning of the Splitter.

sashType

Type of sash for use interaction

Value	Example of the Visualization	Description
fixed		The sash type is fixed and cannot be changed by the user.
interactive		The sash can be changed by the user.
invisible		The sash is invisible.

width

Width of the UI element.

Note

The width of the Splitter must be specified as a percentage or in pixels.