垂直レイアウト

内部にビューを垂直方向に積み重ねられるセクションを作成します。このビューがリストにバインドされると、垂直セクションはリスト内の項目ごとに繰り返され、テーブルのような形式が作成されます。

垂直レイアウトおよび水平レイアウトは、ユーザー・インターフェースの設計に最も一般的に使用されるビューの 1 つです。組み合わせて使用すると、水平レイアウトおよび垂直レイアウトのビューにより、複雑なユーザー・インターフェースの設計に使用できるフロー・レイアウト機能の大部分が提供されます。

ヒント: 通常、UI ツールキットの水平レイアウト・ビューと垂直レイアウト・ビューは、省略表示可能パネルとともに使用されます。

構成プロパティー

「構成」で、ビューの外観、応答性、およびパフォーマンスのプロパティーを設定または変更します。

画面サイズ: プロパティー名の横に画面サイズ・アイコンがある構成プロパティーは、画面サイズごとに異なる値を持つことができます。値を設定しない場合、画面サイズはそのデフォルト値として次に大きい画面サイズの値を継承します。

テーマ定義: テーマ定義は、ビューの色およびスタイルを指定し、その外観を決定します。ビューのルック・アンド・フィールをテーマ・エディターでプレビューできます。テーマを参照してください。

以下の表に、垂直レイアウトの外観構成プロパティーを示します。

表 1. 垂直レイアウトの外観構成プロパティー
外観構成プロパティー	説明	データ・タイプ
レイアウト・フロー	ビューのレイアウトを以下に示します。横水平インライン・スクロール水平方向の位置揃え水平自動折り返し垂直垂直方向の位置揃え	`String`
水平位置合わせ	このレイアウトのビューの水平位置合わせは以下のとおりです。両端揃え左側中央右側注: 「両端揃え」は、「水平インライン・スクロール」および「水平自動折り返し」レイアウト・フローと組み合わせるとうまく動作しません。この組み合わせを使用すると、予期しない結果が生じることがあります。	`String`
垂直位置合わせ	このレイアウトのビューの垂直位置合わせは以下のとおりです。このプロパティーは、水平レイアウト・フローにのみ適用されます。上部中盤下部	`String`
幅	ビューの幅を指定します。幅の単位は `px` (ピクセル)、`%` (パーセント)、または `em` で指定できます。例えば、 `50px`、 `20%`、または `0.4em`です。単位タイプが指定されていない場合は、`px` とみなされます。	`String`
高さ	ビューの高さを指定します (`px` (ピクセル) または `em` 単位)。単位タイプが指定されていない場合は、`px` とみなされます。	`String`

以下の表に、垂直レイアウトの応答性構成プロパティーを示します。

表 2. 垂直レイアウトの応答性構成プロパティー
応答性構成プロパティー	説明	データ・タイプ
レスポンシブ・センサー	(オプション) このレイアウトを含むレスポンシブ・センサー・ビューの ID。省略した場合、親コンテナー内の最も近いセンサーが使用されます。	`Boolean`
動作	レスポンシブ・センサーに定義されているボックス係数に基づいてセクションの振る舞いを指定します。ボックス係数名 (Box factor name): 以下の属性が適用されるレスポンシブ・センサー・ボックス係数の名前。子レイアウト (Child layout): 指定されたボックス係数で使用できるレイアウト。垂直垂直方向の位置揃え横水平インライン・スクロール水平方向の位置揃え水平自動折り返し子位置合わせ (Child alignment): 指定されたボックス係数で使用できる位置合わせ。両端揃え左側中央右側子の幅 (Child width): このボックス係数で使用できる子ビューの幅。例えば、`60%`です。レイアウトに含まれているビューには、より多くの幅を指定できることに注意してください。例えば、 `80%`、 `20%`などです。可視性: 指定されたボックス係数で使用できる可視性の設定。表示なし非表示幅: 指定されたボックス係数で使用できるセクションの幅。高さ: 指定されたボックス係数で使用できるセクションの高さ。 CSS スタイル (CSS style): 指定されたボックス係数に適用できる CSS スタイル。 CSS クラス: 指定されたボックス係数に追加できる CSS クラス。	`ResponsiveBehavior[]`

レスポンシブ・センサー・ビューで垂直レイアウトをネストすることによって、コンテンツの反応性を制御することもできます。

以下の表に、垂直レイアウトのパフォーマンス構成プロパティーを示します。

表 3. 垂直レイアウトのパフォーマンス構成プロパティー
パフォーマンス構成プロパティー	説明	データ・タイプ
非同期ロード	大規模なデータ・セットの場合の UI エクスペリエンスを向上させます。その代わり、セクションがロードを開始すると、全体的な行のロード時間は低速になります。このプロパティーは、セクションがリストにバインドされている場合にのみ使用されます。	`Boolean`
非同期バッチ・サイズ	非同期バッチで同期してロードされる行数を指定します。このプロパティーを使用して、同期ロードと非同期ロードのパフォーマンスを最適化します。このプロパティーは、セクションがリストにバインドされている場合にのみ使用されます。	`Integer`

制約事項: ビューの可視性が「表示」に設定されているにもかかわらず、垂直レイアウト・ビューのラベルが表示されません。垂直レイアウト・ビューにラベルを付けられるようにするには、パネル・ビューと組み合わせて使用することをお勧めします。

例

設計者で、コンテナー・ビューとして使用する垂直レイアウト・ビューをページ・レイアウトに追加します。コンテナー内に 3 つのパネル・ビューを配置します。これらのビューには、 Work Categories、 Claim Type、および Elementsという名前を付けることができます。各ビューの構成プロパティーを以下のように設定します。

「垂直レイアウト」の場合: 「外観」で、「レイアウト・フロー」を Verticalに、「水平位置合わせ」を Justifiedに、「垂直位置合わせ」を Topに設定します。「幅」と「高さ」はブランクのままにします。
Work Categoriesの場合: 「外観」で、「色のスタイル」を Warningに設定し、「幅」を 350pxに設定します。
Claim Typeの場合: 「外観」で、「色のスタイル」を Successに設定し、「幅」を 350pxに設定します。
Elementsの場合: 「外観」で、「色のスタイル」を Dangerに設定し、「幅」を 350pxに設定します。

実行時に、結果には同じ高さと幅の 3 つのパネルが表示されます。垂直セクション内で 1 つずつ積み重ねられます。 Work Categories は黄色 ( Warningの場合)、 Claim Type は緑 ( Successの場合)、 Elements は赤 ( Dangerの場合) です。

イベント

「イベント」プロパティーでビューのイベント・ハンドラーの設定や変更を行います。イベントをプログラムでトリガーするかユーザーがビューと対話したときにトリガーするように設定できます。イベントを定義およびコーディングする方法については、ユーザー定義イベントを参照してください。垂直レイアウトには、以下のタイプのイベント・ハンドラーがあります。

On load: ページのロード時にアクティブ化されます。例：
```
me.setWidth("100%");
```
On responsive update: デバイスの画面サイズに応じてセクションのサイズが変更されたときにアクティブ化されます。

方法

垂直レイアウトに使用できるメソッドについては、垂直レイアウト JavaScript API を参照してください。

その他のリソース

Coach またはページの作成方法については、 Coach の作成を参照してください。
標準プロパティー (「一般」、「構成」、「位置決め」、「可視性」、および「HTML 属性」) について詳しくは、「プロパティーの表示」を参照してください。