Framework7 Floating Action Button

Framework7 Floating Action Button is used for promoted action. It is like a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point.

Note: Floating action button is only supported in Material theme.

There are 3 types of action buttons used in Framework7:

1. Floating Action Button Layout: It is very simple. You just have to place it as a child of page or view.
2. Morph to Popover: If you want to open popover on clicking the floating action button then you can use floating-button-to-popover class.
3. Speed Dial: You can invoke related actions upon clicking the floating action button by using speed dial.

Floating Action Button Layout

This is a very simple layout. You just have to place it as a child of page or view. Use the ?floating-button? class to use the floating action button in your application.

Example

Let's take an example to demonstrate floating action button layout.

Morph To Popover

The "floating-button-to-popover" class is used when you want to open popover on clicking the floating action button.

Example

Let's take an example to demonstrate morph to popover transition.

Speed Dial

You can use speed dial on floating point button. By clicking floating action button, you can invoke related actions. Minimum of 3 and maximum of 6 actions can be used in speed dial actions.

Example

Let's take an example to see different types of speed dial actions on pressing floating buttons.