レイアウトグループを使用して情報をセグメントに順序正しく配置し、画面領域を最適化します。
たとえば、ユーザーが効率的に閲覧できる一連のタブとして関連情報を表示するように、レイアウトグループを設定できます。レイアウトグループを作成したら、作成したレイアウトグループをデザインテンプレートのリージョンの基礎として使用できます。
-
Dev Studioのナビゲーション パネルで「Case types」をクリックし、開きたいケースタイプをクリックします。
-
「Save and run」をクリックして新しいケースを実行します。
-
新しいケースで、編集するレイアウトに移動します。
-
Dev Studioのフッターで「Live UI」アイコンをクリックします。
補足： Live UIツールがアクティブになっています。 ユーザー インターフェイス コンポーネントをリアルタイムで確認できます。 -
編集するレイアウトをクリックし、「Open in Dev Studio」アイコンをクリックします。
-
セクションがテンプレートに基づいていて編集できない場合、「Convert to full section editor」をクリックします。
-
「Design」タブで、「Structural」リストを展開して、「Layout group」をワークエリアにドラッグします。
-
Choose layout-group formatダイアログボックスで、レイアウトグループに以下のいずれかのフォーマットを選択します。
- ヘッダーおよびメニューなしに単一ページとしてレイアウトを表示するには、「Default」を選択します。
- 折りたたみ可能なヘッダーの下にレイアウトを表示するには、「Accordion」を選択します。
- 一度に1つのレイアウトをオプションとしてメニューに表示するには、「Menu」を選択します。
- レイアウトを相互に重ねて配置し、一度にすべてのレイアウトを表示するには、「Stacked」を選択します。
- 各レイアウトにタブを付けて、一度に1つのレイアウトを表示するには、「Tab」を選択します。
- スキンに定義されているカスタムフォーマットでレイアウトを表示するには、「Other」を選択してから、フォーマットを選択します。
-
レイアウトグループにレイアウトまたはコンテナ要素を含めるには、Structuralリストを展開し、レイアウトグループに含める要素を展開します。
- レイアウトグループに基づいた、テンプレート化されたリージョンの作成
レイアウトグループを使用して、密接に関連する情報をアコーディオン、メニュー、スタック、またはタブの各ナビゲーション メカニズムで表示します。 レイアウトグループに基づいた、テンプレート化されたリージョンを作成できます。 ユーザーがApp Studioで実行時に画面からタブの追加、並べ替え、または削除を行う必要がある場合に、これを行えます。
- スキンフォーム — 「Components」タブ — レイアウト — レイアウトグループ
レイアウトグループは、さまざまなタイプのレイアウトを組み合わせて、銀行口座および関連するトランザクションのリストなど、一連のコンテンツを表示します。 レイアウトグループを使用して、一連の情報をナビゲートする方法を指定します。 たとえば、各口座のタブにできます。または、タイプを単に変更して、ドロップダウンとして口座リストを表示できます。
- スキンフォーム — 「Components」タブ — レイアウト — コンテナ
これらのスタイルはコンテナヘッダーに適用されます。 デフォルトのコンテナフォーマットのスタイルを指定して、カスタムのコンテナ フォーマットを作成できます。