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