HSplit
HSplitウィジェットは、1つの領域を複数に分割し、各分割領域のサイズ比率を指定したり、分割線をドラッグして調整したりできる配置ウィジェットです。
備考
このウィジェットはFreeプランではロックされており、Pro・Enterpriseプランで使用できます。
定義・役割
HSplitウィジェットは、内部を複数の分割領域（SplitItem）に分けます。各領域の間には分割線（divider）が描かれ、領域の数とサイズ比率、分割線の太さ・色・余白・角丸を設定できます。
- カテゴリー：Layouts
- デフォルトの分割数：
2 - デフォルトの分割線：表示（白、太さ
10px）
機能
| 機能 | 説明 |
|---|---|
| 領域の分割 | itemCountの値だけ分割領域（SplitItem）に分けます（2〜99個）。 |
| サイズ比率の調整 | 各分割領域のflex値（splitItemNFlex）でサイズ比率を指定します。 |
| 分割線のドラッグ | 分割線の固定を解除すると（isFixedDividerをオフ）、分割線をドラッグして隣接する2つの領域のサイズを調整できます。 |
| 分割線の装飾 | 分割線の表示・太さ・色・余白・角丸を設定します。 |
使い方
- 左側のウィジェットパレットでLayoutsカテゴリーを開きます。
- HSplit項目をキャンバスにドラッグ＆ドロップします。
- 右側のプロパティパネルで
itemCountに分割領域の数を指定します。 - 各
splitItemNFlexの値で領域ごとのサイズ比率を調整します。 - 必要に応じて、分割線の表示・固定の有無（
isShowDivider、isFixedDivider）や太さ・色などを設定します。
プロパティ
| プロパティ | 説明 | デフォルト値 | 値 / タイプ |
|---|---|---|---|
itemCount | 分割領域（SplitItem）の数 | 2 | 整数（2~99） |
isShowDivider | 分割線を表示するかどうか | true（表示） | true / false |
isFixedDivider | 分割線を固定するかどうか。固定するとドラッグでのサイズ調整はできません | true（固定） | true / false |
dividerThickness | 分割線の太さ | 10 | 数値（px） |
dividerIndent | 分割線の開始側の余白 | 0 | 数値（px） |
dividerEndIndent | 分割線の終了側の余白 | 0 | 数値（px） |
dividerColor | 分割線の色 | #FFFFFF（白） | カラー |
dividerBorderRadius | 分割線の角丸 | 0 | 数値（px） |
splitItem1Flex | 1番目の分割領域のサイズ比率（重み） | 1 | 整数（1~1000） |
splitItem2Flex | 2番目の分割領域のサイズ比率（重み）。itemCountを増やすとsplitItem3Flex…がその数だけ自動生成されます | 1 | 整数（1~1000） |
注意・ヒント
警告
分割線をドラッグしてサイズを調整するには、isFixedDividerをオフ（false）にする必要があります。デフォルトは固定（true）のため、この状態では分割線をドラッグしてもサイズは変わりません。
ヒント
各領域のサイズはsplitItemNFlexの値の比率で決まります。たとえば2つの領域のflexが1と2であれば、サイズ比率は1:2になります。itemCountを増やすと、その数だけflexプロパティが自動的に追加されます。
さらに詳しく
ヒント
このウィジェットをスクリプトで制御するWidget Control（Property・Method・Event）の全体は、HSplit Widget Controlをご覧ください。