A Floating Action Button (FAB) represents the primary action in a Page. But, it’s not limited to only a single action. It can contain any number of sub-actions too. And more importantly, it can also be used inline in your Pages or Layouts.
Note that you don’t need a QLayout to use FABs.
QFab API
QFabAction API
Usage
There are two types of FABs: expandable (has sub-actions) and non-expandable.
TIP
For an exhausting list of options, please read the API cards (at the top of this page).
Non-Expandable
If you want a non-expandable FAB, all you need is a round button – wrapped in QPageSticky if used on a QLayout.
Expandable
Internal labels v1.9+
When the labels are internal and your QFab opens up vertically (up or down) then you also have the ability to choose how to vertically align the sub-actions:
External labels v1.9+
By default, when the label is external on the main QFab (not the sub-actions), it gets shown only when QFab is opened. However, you can override that by setting a Boolean value for hide-label prop.
Hide icons v1.9.14+
If we hide the icon (through specific prop), we should at least use an internal label:
Padding v1.11+
The default padding for QFab is “md” and for QFabAction is “sm”. However, you can use padding prop to customize it (accepts CSS units too):
Square style v1.9+
Slots v1.17+
Notice the slots for QFab and the slots for QFabAction below:
With QPageSticky
Draggable
Below is a nice example of using TouchPan for making the QFab draggable across the screen.