Skip to main content

 

 

 

 
Language:
 
モバイルアプリとリアクティブWebアプリにのみ適用されます
Service Studioバージョン :
 
 
OutSystems

Action Sheet

Action Sheet UIパターンを使用すると、ユーザーアクションによってトリガーされたときに画面の下部からスライドするメニューを追加できます。

Action Sheet UIパターンの使用方法

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

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

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

    デフォルトで、Action Sheetウィジェットには5つのボタンのプレースホルダが含まれています。

  3. 関連するコンテンツを[Button]プレースホルダに追加します。この例では、クリックすると他のページに移動するボタンを追加しています。

  4. ローカル変数を追加します。この例では、変数に「IsOpened」という名前を付けます。

  5. Action Sheetパターンを選択し、[Properties]タブでIsOpenプロパティを新しいローカル変数(この例ではIsOpened)に設定します。

  6. Action Sheetメニューを開くため、ボタンを追加し、[Properties]タブの[OnClick]ドロップダウンで[New Client Action]を選択します。

  7. クライアントアクションにAssignを追加し、IsOpenedローカル変数を[True]に設定します。

  8. Action Sheetメニューを閉じるため、[Properties]タブのOnCloseイベントの[Handler]ドロップダウンで[New Client Action]を選択します。

  9. クライアントアクションにAssignを追加し、IsOpenedローカル変数を[False]に設定します。

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

プロパティ

プロパティ 説明
IsOpen(Boolean型): 必須 変数を割り当て、Action Sheetを開いたり閉じたりします。
ExtendedClass Action Sheet UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。



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