Sidebar

Sidebar UIパターンを使用すると、メインコンテンツの余白に追加の情報を表示できます。この追加の情報により、ユーザーのメインコンテンツに関する理解が深まります。

Sidebar UIパターンの使用方法

この例では、Sidebarウィジェットを開いたり閉じたりするボタンを作成します。

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

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

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

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

   

2. ［Properties］タブの［Name］フィールドに、Sidebarウィジェットの名前を入力します。この例では、「MySidebar」という名前を付けます。

   

3. フォーム、画像、テキストなどのコンテンツを［Header］プレースホルダと［Content］プレースホルダに追加します。ここではテキストを追加しています。

   

4. ツールボックスから、ButtonウィジェットをSidebarウィジェットのすぐ下にドラッグします。次に、［Properties］タブの［Label］フィールドに、ボタン上に表示するテキスト（この例では、「Open」）を入力し、［Method］ドロップダウンで［Ajax Submit］を選択します。

   

5. ボタンの画面アクションを作成するため、ボタンをダブルクリックし、［Logic］タブを選択し、Server ActionsフォルダのToggleSidebarアクションに移動して画面アクションにドラッグします。

   

6. ［Properties］タブの［WidgetId］ドロップダウンで、ウィジェットのIDを選択します。この例では、MySidebar.Idです。

   

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