Floating Actions
画面の右下にアクションをフローティング表示し、一連の追加アクションへのアクセスを提供します。
FloatingActionsは、基本アクションを画面に表示するために使用します。作成、共有、参照などのアクションを選択します。削除、アーカイブ、アラートなどのアクションは避けます。テキストのカット&ペーストなどの限定アクションやツールバーに配置すべきアクションは除外します。
使用方法
-
FloatingActionパターンをプレビューにドラッグします。
-
コンテンツをプレースホルダで設定します。
-
パブリッシュしてテストします。
入力パラメータ
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の位置を変更する
-
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. パブリッシュしてテストします。
ListRecordsを持つFloatingActionsを使用する
-
FloatingActionsパターンをプレビューにドラッグします。
-
［Items］プレースホルダに、ListRecordsウィジェットをドラッグします。
-
ListRecordsのLine SeparatorプロパティをNoに設定します。
-
ListRecordsにFloatingActionsItemをドラッグします。
-
FloatingActionsItemで、Expressionを使用して必要なコンテンツを表示します。
-
パブリッシュしてテストします。