V-Stack

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

要点

V-Stackは、テキストや画像などの子要素を縦一列に配置するレイアウトコンテナーです。子要素の間隔、配置、オーバーフローの動作を制御し、表示されるコンテンツは子要素によって提供されます。

1. 概要

V-Stackは、直下の子要素を上から下に配置するフローベースのレイアウトコンテナーです。設定した間隔に基づいて子要素を積み重ね、選択した設定に従ってコンテナー内に配置します。そのため、V-Stack自体には表示コンテンツがなく、すべてのコンテンツは内部に配置された要素から取得されます。

V-Stackは、別のV-Stack、H-Stack、Canvas要素など、対応している他のコンテナー要素内に配置できます。また、これらのコンテナー要素を含む各種要素をV-Stack内に追加して、カスタムレイアウトを作成できます。

適した用途：

V-Stack要素は、独自のコンテンツ連携機能を持たないレイアウト要素です。表示コンテンツは、V-Stack内に配置された子要素やプリセットから取得されます。

プロパティ	説明
［要素名］	このV-Stack要素の内部識別子です。このリンク名はデザイナーに配置した際に自動生成され、必要に応じて変更できます。

メモ：［スタイル］パネルでV-StackをH-Stackに切り替えると、すべての子要素とその設定を維持したまま、コンテナーが横方向の配置に変換されます。

［アクション］タブでは、ポータルユーザーがV-Stackをクリックして、事前設定された［クリック時］のアクションを実行した場合の動作を設定します。設定できるアクションは次のとおりです。

［移動先］ - V-Stackをクリックすると、ポータルユーザーが指定した移動先に移動します。この項目を選択すると、追加で2つのプロパティが表示されます。

［ページ／URL］ - 移動先を指定します。一般公開されているURLを直接入力するか、ドロップダウンに表示されるポータルページの一覧から選択できます。ドロップダウンには、すべての標準ページ（サインイン、登録、パスワードのリセット、パスワードの作成）と、ポータルで作成したカスタムページが表示されます。
［開く場所］ - 移動先を読み込む方法を設定します。［同じウィンドウ］では現在のブラウザータブを再読み込みして移動先のポータルページまたはURLを表示し、［新しいウィンドウ］では別のブラウザータブで開きます。

V-Stackを追加し、次の操作を試します。

3つのテキスト要素を内部にドロップし、［間隔］を16pxに設定して、一定の間隔で縦に積み重ねられたコンテンツセクションを作成します。
［幅］を［全体］に設定し、レイアウト値のTとLを0に設定したCanvas内にV-Stackを配置して、高さ全体に固定されたサイドバーパネルを作成します。
［コンポーネントの配置］を［中央］に設定し、コンテナー内のすべての子要素を水平方向と垂直方向の中央に配置します。
［オーバーフロー］を［スクロール］に設定し、［高さ］を子要素の合計の高さより小さい値に固定して、スクロール可能なコンテンツ領域を作成します。

V-Stackで制御できるのは直下の子要素のみ - 別のV-StackやCanvasなどの入れ子コンテナーをV-Stack内に追加すると、そのコンテナーは自身の子要素を個別に管理します。
全体に合わせるサイズ設定を利用できるのは、親要素がスタックの場合のみ - V-Stackの親要素がCanvas要素の場合、レイアウトプロパティの［幅］または［高さ］では［全体］を利用できません。
オーバーフローが表示に反映されるのは、V-Stackのサイズが固定されている場合のみ - スタックのサイズが［自動］に設定されている場合、子要素に合わせて拡張されるため、オーバーフローが発生しないことがあります。