HSplit
The HSplit widget is a layout widget that divides one area into several panes. Set the size ratio of each pane, or drag the divider to resize them.
This widget is locked on the Free plan. It's available on the Pro and Enterprise plans.
Definition and role
The HSplit widget divides its interior into several panes (SplitItem). A divider is drawn between the panes, and you can set the number of panes, their size ratios, and the divider's thickness, color, indent, and corner radius.
- Category: Layouts
- Default number of panes:
2 - Default divider: shown — white,
10px thick
Features
| Feature | Description |
|---|---|
| Area splitting | Divides the area into as many panes (SplitItem) as itemCount specifies — 2 to 99. |
| Size ratio | Set each pane's size ratio with its flex value (splitItemNFlex). |
| Divider dragging | Turn isFixedDivider off to unlock the divider, then drag it to resize the two adjacent panes. |
| Divider styling | Set whether the divider is shown, along with its thickness, color, indent, and corner radius. |
How to use
- Open the Layouts category in the left widget palette.
- Drag the HSplit item onto the canvas.
- In the Properties panel on the right, set the number of panes with
itemCount. - Adjust each pane's size ratio with its
splitItemNFlexvalue. - If needed, set whether the divider is shown and locked (
isShowDivider,isFixedDivider), along with its thickness and color.
Properties
| Property | Description | Default | Value / Type |
|---|---|---|---|
itemCount | Number of panes (SplitItem) | 2 | Integer (2~99) |
isShowDivider | Whether the divider is shown | true (shown) | true / false |
isFixedDivider | Whether the divider is locked. A locked divider can't be dragged to resize panes | true (locked) | true / false |
dividerThickness | Divider thickness | 10 | Number (px) |
dividerIndent | Indent at the start of the divider | 0 | Number (px) |
dividerEndIndent | Indent at the end of the divider | 0 | Number (px) |
dividerColor | Divider color | #FFFFFF (white) | Color |
dividerBorderRadius | Corner radius of the divider | 0 | Number (px) |
splitItem1Flex | Size ratio (weight) of the first pane | 1 | Integer (1~1000) |
splitItem2Flex | Size ratio (weight) of the second pane. Raise itemCount and splitItem3Flex … are created automatically, one per pane | 1 | Integer (1~1000) |
Notes and tips
To resize panes by dragging the divider, turn isFixedDivider off (false). The default is locked (true), so until you change it, dragging the divider does nothing.
Each pane's size comes from the ratio of the splitItemNFlex values. Two panes with flex 1 and 2, for example, end up sized 1:2. Raise itemCount and the matching flex properties are added automatically.
Learn more
For the full set of Widget Controls (Property, Method, and Event) that drive this widget from a script, visit HSplit Widget Control.