セクション ウィジェットは、マップ、リスト、画像などの他の任意のウィジェットの組み合わせを含められる、1 つ以上のビュー内の動的コンテンツのレイアウト コンテナーです。 セクション ウィジェットに複数のビューが存在する場合、組み込みナビゲーション ツールを有効にするか、ウィジェットをビューのナビゲーション ウィジェットと連携して動作させることができます。 セクション内のコンテンツが変更されると、ページ全体の代わりにセクションだけが更新されるため、アプリのパフォーマンスが向上します。
例
このウィジェットを使用して、次のようなアプリの設計要件をサポートします。
- 見出しが類似している複数の大きい画像を表示する一方で、アプリでのスクロールを減らします。セクション内で複数のビューを使用して、組み込みツールを含めるか、ビューのナビゲーション ウィジェットを追加することで、ユーザーはページをスクロールすることなく各画像にアクセスできるようになります。
- 異なるフィーチャが同じ場所に焦点を当てるようにして、別々のページやブロックに移動する必要なしで、リストとマップを使って情報を紹介します。 さまざまな視点から見られるようにビューを切り替えることができます。 たとえば、マップとリストを含む 2 つのビューを持つセクションを作成します。 一方のビューにはサンディエゴのレストランのマップを表示し、もう一方のビューには同じエリアでレクリエーション スポットを含んだマップを表示します。
使用上の注意
複数のビューを作成して、1 つのセクションで動的コンテンツを整理できます。 セクションはページの任意の場所に配置でき、複数のビューを含めることができます、各ビューに別々のコンテンツを含めることもできます。 エンド ユーザーがセクションの異なるビューを参照できるように、ナビゲーション ツールを有効にするか、ビューのナビゲーション ウィジェットを追加して、多くのスタイルと柔軟なレイアウトから選択することができます。
対応するビューのナビゲーション ウィジェットでビュー名が表示されるので、意味のある名前を付けます。 構成パネルでのビューの順序は、ビューのナビゲーション ウィジェットで表示される順序です。
設定
セクション ウィジェットには以下の設定が含まれます。
- [ビュー] - 複数のビューを一度に 1 つずつ追加するか、既存のビューと同じ背景またはレイアウトになるようにしたい場合は既存のビューを複製します。
- [名前の変更]、[複製]、および [削除] オプションを使用してビューを管理します。 ビュー名はエクスペリエンスの URL でも使用されます。 公開後にビューの名前を変更した場合でも、以前に使用していた URL は有効です。
- ビューをドラッグして、セクション内のナビゲーション順を変更します。
- [背景] - 色または画像を選択して、各ビューの背景を編集します。 背景画像を使用する場合、[フィット]、[塗りつぶし]、[中央]、[タイル]、または [ストレッチ] を選択して、ビューでの位置を設定します。
- [遅延読み込み] - ウィジェットで表示する必要があるまでビューのコンテンツの読み込みを遅らせることで、セクションに多数のビューが含まれる場合のパフォーマンスを向上させます。
- [ツール] - ユーザーがビューを操作するためのツールが含まれます。
- 矢印
- [方向] - 矢印を横向きまたは縦向きに表示します。
- [サイズ] - 矢印のサイズを定義します。
- [オフセット] - 矢印の位置を定義します。 0 は、矢印がセクション ウィジェットの端にあることを意味します。 正のオフセットを持つ矢印は、負の値を持つ矢印よりも近くなります。
- ドット
- [位置] - 左、上、右、下から位置を選択します。
- [サイズ] - ドットのサイズを定義します。
- [オフセット] - ドット間の位置を定義します。 0 は、ドットがセクション ウィジェットの端にあることを意味します。 正のオフセットを持つドットは、負の値を持つドットよりもセクション ウィジェットの中央に近くなります。
- [間隔] - 各ドット間の間隔を決定します。
- 矢印
- [自動再生] - 事前定義された時間間隔でセクションのビューを自動的に表示します。
- [間隔] - 自動再生がオンになっているときのビュー間の時間間隔を設定します。
- [ループ] - ビューをループで表示できるようにします。
- 実行中にセクション ウィジェットにポインターを合わせると、自動再生プロセスが一時停止します。 ユーザーがセクション ツールやリンクされたビュー ナビゲーション ウィジェットをクリックして別のビューに切り替えると、切り替わったビューから自動再生が継続されます。
- セクションの [アニメーション] スタイル設定には、セクション パネルとビューの両方をアニメーション化するオプションが含まれています。 詳細については、「アニメーション」をご参照ください。