Skip to main content

 

 

 

 
Language:

 

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

Floating Actionsのリファレンス

レイアウトおよびクラス

イベント

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

CSSセレクタ

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

高度なユースケース

Floating Actionsの位置を変更する

1.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-4-ss.gif>)

List Recordsを持つFloating Actionsを使用する

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

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

1.List RecordsのLine Separatorプロパティを[None]に設定します。

1.List Recordsに、Floating Actions Itemをドラッグします。

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

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

  • Was this article helpful?