Skip to main content

 

 

 

 
Language:

 

 
モバイルアプリとリアクティブWebアプリにのみ適用されます

 

 
 
OutSystems

Sidebar

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

Sidebar UIパターンの使用方法

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

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

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

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

  3. Properties]タブの[Name]フィールドにSidebarウィジェットの名前(この例では「MySidebar」)を入力し、[IsOpen]ドロップダウンで値(この例では[False])を選択します。

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

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

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

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

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

プロパティ

プロパティ 説明
IsOpen(Boolean型): 必須 Sidebarの状態を処理する変数。
ExtendedClass(Text型): オプション Sidebar UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

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