VSplit

The VSplit widget is a layout widget that divides its area vertically into several regions, with a divider between them for resizing.
Use it to organize a screen into multiple sections.

info

This widget is locked on the Free plan and available on the Pro and Enterprise plans.

Definition and role

The VSplit widget divides its own area vertically into multiple split areas (SplitItem). Each area holds another widget, and a divider is drawn between areas. Set the divider's visibility, thickness, color, indent, and corner radius as needed. Turn divider locking off, and you can drag a divider to resize the two adjacent areas in real time.

• Category: Layouts
• Default number of split areas: 2
• Default divider: thickness 10, white, always visible, locked (not draggable)

Features

Feature	Description
Vertical split	Divides the screen vertically into itemCount (2–99) areas.
One widget per area	Drag an individual widget into each split area (SplitItem).
Initial size ratio	Set each area's initial size ratio with splitItem{N}Flex. (For example, 2 and 1 gives a 2:1 ratio.)
Drag to resize	Turn divider locking (isFixedDivider) off to drag a divider and resize the two adjacent areas in real time.
Divider style	Set the divider's visibility, thickness, color, indent (start and end), and corner radius.

How to use

1. Open the Layouts category in the left widget palette.
2. Drag and drop the VSplit item onto the canvas.
3. In the properties panel on the right, set the number of areas with itemCount.
4. Drag the widget you want into each split area (SplitItem).
5. If needed, adjust the initial ratios with splitItem{N}Flex and the appearance with the divider properties. To resize by dragging, turn isFixedDivider off.

Properties

Property	Description	Default	Value / Type
itemCount	Number of areas to split into	2	Integer (2–99)
isShowDivider	Whether the divider is shown	true (shown)	true / false
isFixedDivider	Whether the divider is locked (turn it off to resize by dragging)	true (locked)	true / false
dividerThickness	Divider thickness	10	Number
dividerIndent	Indent at the divider's start	0	Number
dividerEndIndent	Indent at the divider's end	0	Number
dividerColor	Divider color	White (#FFFFFF)	Color
dividerBorderRadius	Divider corner radius	0	Number
splitItem{N}Flex	Initial size ratio of each area (generated automatically, one per area)	1	Integer (1–1000)

Notes and tips

warning

By default the divider is locked (isFixedDivider = true), so dragging won't resize the areas. Turn isFixedDivider off when you need drag resizing.

tip

Each area's initial size comes from the ratio between the splitItem{N}Flex values. To split two areas 2:1, for example, set their flex values to 2 and 1. Widgets can only go inside a split area (SplitItem).

Learn more

tip

For the full Widget Control (Property, Method, Event) you use to drive this widget from a script, visit VSplit Widget Control.