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ウィジェットには[Button]プレースホルダと[Items]プレースホルダが含まれています。[Button]プレースホルダにはアイコンが含まれ、[Items]プレースホルダには3つのFloating Actions Itemウィジェット(それぞれが[Label]プレースホルダと[Item]プレースホルダを含む)が含まれています。必要に応じてFloating Actions Itemウィジェットを追加または削除することができます。

  3. 関連するコンテンツをプレースホルダに追加します。

    この例では、[Label]プレースホルダにテキストを追加し、[Item]プレースホルダにリンク付きアイコンを追加しています。

  4. Floating Actionsウィジェットを選択し、[Properties]タブで関連するプロパティを設定します。たとえば、ページの読み込み時にアクションを展開して表示するかどうかなどを設定します。

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

プロパティ

Floating Actions

プロパティ 説明
IsExpanded(Boolean型): オプション Trueの場合、フローティングアクションが展開されてすぐに画面に表示されます。Falseの場合、フローティングアクションは表示されません。これがデフォルトです。
IsHover(Boolean型): オプション Trueの場合、マウスポインタを上に重ねるとフローティングアクションがトリガーされます。Falseの場合、マウスポインタを上に重ねてもフローティングアクションはトリガーされません。これがデフォルトです。
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?