Section

Section UIパターンを使用すると、画面上のコンテンツを様々なセクションに整理できます。また、Section Index UIパターンとともに使用すると、各セクションのアンカーを作成することができます。

Section UIパターンの使用方法

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

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

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

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

![](<images/section-2-ss.png?width=800>)

デフォルトで、Sectionウィジェットには［Title］、［Actions］、［Content］の各プレースホルダが含まれています。

1.プレースホルダにコンテンツを追加します。この例では、［Title］プレースホルダにタイトルを追加し、［Content］プレースホルダにテキストを追加し、［Actions］プレースホルダにボタンを追加しています。

![](<images/section-3-ss.png?width=800>)

1.［Actions］プレースホルダに追加したコンテンツに、必要なアクションを追加します。この例では、追加したボタンによってユーザーを新しいページにリダイレクトされます。

![](<images/section-6-ss.png?width=800>)

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