61

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.

Test it Now

---

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.

Test it Now

---

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.

Test it Now