Floating Actions Reference
Collaborate with us
Edit this page on GitHub
Layout and classes
Events
Event Name | Description | Mandatory |
---|---|---|
OnToggle | Event fired after the floating actions are toggled | False |
CSS Selectors
Element | CSS Class | Description |
---|---|---|
.floating-actions | .is--open | Set when the Floating Actions Pattern is open |
Advanced Use Case
Change Floating Actions position
-
Write the following CSS code in the CSS editor.
.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); }
-
Publish and test.
Use Floating Actions with List Records
-
Drag the Floating Actions Pattern into the preview.
-
In the Items placeholder, drag a List Records widget.
-
Set the Line Separator property of the List Records to None.
-
In the List Records, drag a Floating Actions Item.
-
In the Floating Actions Item, use expressions to display the required content.
-
Publish and test.