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.
There are two types of FABs: expandable (has sub-actions) and non-expandable.
For an exhausting list of options, please read the API cards (at the top of this page).
If you want a non-expandable FAB, all you need is a round button – wrapped in QPageSticky if used on a QLayout.
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 icons v1.9.14+
If we hide the icon (through specific prop), we should at least use an internal label:
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+
Notice the slots for QFab and the slots for QFabAction below:
Below is a nice example of using TouchPan for making the QFab draggable across the screen.