メインコンテンツまでスキップ

Divider-V

Divider-Vウィジェットは、コンテンツの間を縦線で分ける区切り線です。
横に並べて配置した項目の間に縦の境界線を入れるときに使います。

定義・役割

Divider-Vウィジェットは、縦方向の細い線を描いて左右のコンテンツを視覚的に区切ります。線の太さ・色、上下の余白、そして線が占める横幅を設定できます。

  • カテゴリー: Dividers(区切り線・余白)
  • ドロップ時: 100 × 100サイズのSizedBoxの中に縦の区切り線が描かれます。(このSizedBoxはStylesパネルにパーツとして表示されます)線の太さ・色などの区切り線プロパティは未設定なので、線自体はアプリテーマのデフォルトスタイルで描かれます。

機能

機能説明
縦の区切り横に配置されたコンテンツの間に縦線を描いて領域を分けます。
線のスタイル線の太さ(thickness)と色(color)を設定します。
余白・幅の調整線の上(indent)・下(endIndent)の余白と、線が占める横幅(width)を調整します。

使い方

  1. 左のウィジェットパレットでDividersカテゴリーを開きます。
  2. Divider-V項目をキャンバスにドラッグ&ドロップします。
  3. 右のプロパティパネルで、線の太さ(thickness)と色(color)を希望の値に調整します。
  4. 必要に応じて、上下の余白(indentendIndent)と横幅(width)を設定します。

プロパティ

プロパティ説明デフォルト値値 / タイプ
width区切り線が占める横幅(線はこの幅の中央に描かれます)未設定数値(px)
thickness実際に描かれる線の太さ未設定数値(px)
indent線の上(始点)の空き余白未設定数値(px)
endIndent線の下(終点)の空き余白未設定数値(px)
color線の色未設定カラー

注意・ヒント

ヒント

すべてのプロパティを空のまま(未設定)にすると、アプリテーマのデフォルトの区切り線スタイルで描かれます。線を目立たせたい場合は、thicknesscolorを直接指定してください。

注記

widthは線自体の太さではなく、区切り線が占める横幅です。実際の線の太さはthicknessで調整し、線はこの幅の中央に描かれます。

さらに詳しく

ヒント

このウィジェットをスクリプトで制御するWidget Control(Property・Method・Event)の全体は、Divider-V Widget Controlドキュメントでご確認ください。