Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

従来のWebアプリにのみ適用されます

 

 

OutSystems

Sidebar

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

Sidebar UIパターンの使用方法

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

サイドバーをトリガーするには、Ajax Submitを含むボタンを使用して新しい画面アクションを呼び出し、ToggleSidebarアクション([Logic]タブ内にあります)を使用してサイドバーを開いたり閉じたりします。パラメータを使用して、ページにオーバーレイがあるかどうかを定義します。

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

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

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

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

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

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

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

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

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

プロパティ

プロパティ 説明
HasOverlay(Boolean型): オプション Trueに設定すると、Sidebarの背後にオーバーレイが表示されます。Falseに設定すると、オーバーレイは表示されません。これがデフォルト値です。
ExtendedClass(Text型): オプション Sidebar UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるSidebar UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるSidebar UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
  • Was this article helpful?