Section Index

Section Index UIパターンを使用すると、画面のコンテンツを整理してページ内をすばやく移動できます。

Section Index UIパターンの使用方法

1.Service StudioのツールボックスでSection Indexを検索します。

Section Indexウィジェットが表示されます。

![](<images/sectionindex-8-ss.png>)

1.ツールボックスから、Section Indexウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

この例では、Section Indexウィジェットを列にドラッグしています。

![](<images/sectionindex-2-ss.png>)

1.ツールボックスでSectionウィジェットを検索し、アプリケーション画面のメインコンテンツ領域にドラッグします。アプリに必要な数に応じてセクションを追加します。

この例では、4つのSectionウィジェットを[列に](../../../../../develop/ui/patterns/web/structure/columns.md)ドラッグしています。各Sectionウィジェットには、［Title］、［Actions］、［Content］の各プレースホルダが含まれています。

![](<images/sectionindex-5-ss.png>)

1.関連するコンテンツをSectionウィジェットの［Title］プレースホルダと［Content］プレースホルダに追加します。

この例では、［**Title**］プレースホルダに従業員名を追加し、［**Content**］プレースホルダにテキストと画像を含むCard Sectionedウィジェットを追加しています。

![](<images/sectionindex-1-ss.png>)

画面上にあるすべてのセクションへのリンクが自動的に作成されます。リンクの名前は、各セクションの［**Title**］プレースホルダに入力したテキストに基づきます。以下の例では、リンクは手順2で入力した従業員名に設定されています。

![](<images/sectionindex-3-ss.png>)

1.［Properties］タブでオプションのプロパティを設定し、Section Indexのルックアンドフィールをカスタマイズできます。

![](<images/sectionindex-6-ss.png>)

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。