DevExtreme - Floating Action Button (v19.1)

The Floating Action Button is a button that performs the primary action of a view. In some cases it can act as a Speed Dial, opening a small stack of actions that are all considered to be of equal importance to the view. The button is displayed in front of all screen content, to be readily accessible to the user.

The Floating Action Button is available on all platforms supported by DevExtreme, including Angular, Vue, React, jQuery and ASP.NET MVC and ASP.NET Core.

Configuration

Taking inspiration from the Material Design guidelines published by Google, we adopted the Speed Dial concept and implemented the Floating Action Button as a configuration container that automatically collects and includes all SpeedDialAction components defined on a page. There is no specific component to instantiate for the Floating Action Button itself, it becomes visible as soon as SpeedDialAction instances are created.

$('#action-add').dxSpeedDialAction({
  icon: 'add',
  onClick: e => {
    // handle event
  }
});

Floating Action Button With A Single Action

If more than one SpeedDialAction is found, the button automatically acts as a container and opens up the stack of actions when clicked.

Speed Dial with Multiple Actions

Some configuration options influence how the Floating Action Button behaves. By default, a maximum of 5 SpeedDialActions is included, but this can be changed. It is also possible to position the button relative to a specific control on the page, using the position options. Documentation of all configuration settings is here.

DevExpress.config({
  floatingActionButtonConfig: {
    position: {
      at: 'right bottom',
      my: 'right bottom',
      offset: '-16 -16'
    },
    icon: 'add',
    closeIcon: 'close',
    maxSpeedDialActionCount: 5
  }
});

What Do You Think?

Demos for all supported platforms are available here. We have several plans for the future, including labeled actions, configurable expansion direction, templating, and automatic integration with Data Grid, Scheduler and Tree List widgets.

If you have any thoughts on our implementation, or suggestions for improvements, please feel free to leave a comment below or get back to us on GitHub.

7 comment(s)
Engº Silvio Cruz

Make it for asp too :)

23 May, 2019
Jim Foye

I can use this today, thanks!

23 May, 2019
SistemasCaltic

Previosuly I was developed my custom action button to a help support http://somup.com/cqh0bknCUJ

23 May, 2019
Vladimir Frizen (DevExpress)

@Engº Silvio Cruz

We already released ASP.NET WebFroms and MVC Extension Floating Action Button. Please refer to the following article for details:

docs.devexpress.com/.../floating-action-button

WebForms and MVC Schedulers have a built-in FAB:

docs.devexpress.com/.../floating-action-button

24 May, 2019
Polarier Tilsa

Fine, but if I have two grids I can't put two floating buttons, right?

29 May, 2019
Marina G (DevExpress)

Polarier Tilsa

You're right. The floating action button performs the most common primary action on the page, so it is not recommended to display multiple buttons on one page. However, one FAB can include many speed dial actions. If your application screen contains two grids, define each grid's actions with different icons and/or hints.

31 May, 2019
Adlay Almeida (AA)

This would be amazing in WPF! Any plans to add it there too?

31 May, 2019

Please login or register to post comments.