Sidebar
Sidebar UIパターンを使用すると、メインコンテンツの余白に追加の情報を表示できます。この追加の情報により、ユーザーのメインコンテンツに関する理解が深まります。
Sidebar UIパターンの使用方法
この例では、Sidebarウィジェットを開いたり閉じたりするボタンを作成します。
サイドバーをトリガーするには、Ajax Submitを含むボタンを使用して新しい画面アクションを呼び出し、ToggleSidebarアクション([Logic]タブ内にあります)を使用してサイドバーを開いたり閉じたりします。パラメータを使用して、ページにオーバーレイがあるかどうかを定義します。
-
Service Studioのツールボックスで
Sidebar
を検索します。Sidebarウィジェットが表示されます。
-
ツールボックスから、Sidebarウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。
-
[Properties]タブの[Name]フィールドに、Sidebarウィジェットの名前を入力します。この例では、「MySidebar」という名前を付けます。
-
フォーム、画像、テキストなどのコンテンツを[Header]プレースホルダと[Content]プレースホルダに追加します。ここではテキストを追加しています。
-
ツールボックスから、ButtonウィジェットをSidebarウィジェットのすぐ下にドラッグします。次に、[Properties]タブの[Label]フィールドに、ボタン上に表示するテキスト(この例では、「Open」)を入力し、[Method]ドロップダウンで[Ajax Submit]を選択します。
-
ボタンの画面アクションを作成するため、ボタンをダブルクリックし、[Logic]タブを選択し、Server ActionsフォルダのToggleSidebarアクションに移動して画面アクションにドラッグします。
-
[Properties]タブの[WidgetId]ドロップダウンで、ウィジェットのIDを選択します。この例では、MySidebar.Idです。
これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。
プロパティ
プロパティ | 説明 |
---|---|
HasOverlay(Boolean型): オプション | Trueに設定すると、Sidebarの背後にオーバーレイが表示されます。Falseに設定すると、オーバーレイは表示されません。これがデフォルト値です。 |
ExtendedClass(Text型): オプション | Sidebar UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。 例
|