Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Traditional Web Apps

 

 

OutSystems

Floating Actions

画面の右下にアクションをフローティング表示し、一連の追加アクションへのアクセスを提供します。

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

使用方法

  1. FloatingActionパターンをプレビューにドラッグします。

1.コンテンツをプレースホルダで設定します。

1.パブリッシュしてテストします。

入力パラメータ

FloatingActions

入力名 説明 必須 デフォルト値
Trigger ボタンのトリガーのタイプを設定します。 Trigger Identifier No Entities.Trigger.Click
ExtendedClass このブロックにカスタムスタイルクラスを追加します。 Text No なし

FloatingActionsItem

入力名 説明 必須 デフォルト値
ExtendedClass このブロックにカスタムスタイルクラスを追加します。 Text No なし

レイアウトおよびクラス

イベント

イベント名 説明 必須
OnToggle フローティングアクションがトグルされると起動するイベント False

CSSセレクタ

要素 CSSクラス 説明
.floating-actions .is--open Floating Actionsパターンが開いている場合に設定します

高度なユースケース

FloatingActionsの位置を変更する

1.CSSエディタで以下のCSSコードを記述します。

```css
.floating-actions {
    -webkit-box-align: start;
       -ms-flex-align: start;
          align-items: flex-start;
    left: 0;
    right: auto;
}

.floating-actions-items {
    -webkit-box-align: start;
       -ms-flex-align: start;
          align-items: flex-start;
    padding-left: var(--space-s);
}

.floating-actions-item {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
       -ms-flex-direction: row-reverse;
           flex-direction: row-reverse;
}

.floating-actions-item-button {
    margin-left: 0;
    margin-right: var(--space-base); 
}
```

1.パブリッシュしてテストします。

![](<images/floatingactions-gif-1.gif>)

ListRecordsを持つFloatingActionsを使用する

1.FloatingActionsパターンをプレビューにドラッグします。

1.[Items]プレースホルダに、ListRecordsウィジェットをドラッグします。

1.ListRecordsのLine SeparatorプロパティをNoに設定します。

1.ListRecordsにFloatingActionsItemをドラッグします。

1.FloatingActionsItemで、Expressionを使用して必要なコンテンツを表示します。

1.パブリッシュしてテストします。

  • Was this article helpful?