Skip to main content

 

 

 

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

Floating Actions

Floating Actions UIパターンを使用すると、画面の右下にアクションをフローティング表示し、一連の追加アクションへのアクセスを提供できます。

FloatingActions UIパターンは、基本アクションを画面に表示するために使用します。作成、共有、参照などのアクションを選択します。削除、アーカイブ、アラートなどのアクションは避けます。テキストのカット&ペーストなどの限定アクションやツールバーに配置すべきアクションは除外します。

Floating Actions UIパターンの使用方法

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

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

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

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

プロパティ

Floating Actions

プロパティ 説明
Trigger(Trigger Identifier型): オプション ボタンのトリガーのタイプを設定します。以下の値が事前定義されています。

  • Click
  • Hover
  • Manual

  • Entities.Trigger.Click - ボタンをクリックするとトリガーされます。これがデフォルトです。
  • Entities.Trigger.Hover - マウスポインタをボタンの上に重ねるとトリガーされます。
ExtendedClass(Text型): オプション Floating Actions UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。



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

Floating Actions Item

プロパティ 説明
ExtendedClass(Text型): オプション Floating Actions Item UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。



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