React Common - Object Structures - globalConfig - floatingActionButtonConfig

Configures a Floating Action Button (FAB) that emits a stack of related actions (speed dial).

Type:

Object

View Demo

If you change this object at runtime, call the DevExpress.ui.repaintFloatingActionButton() method afterwards to apply the changes.

closeIcon

Specifies the icon the FAB displays when the speed dial is opened.

Type:

String

Default Value: 'close'

direction

Specifies the direction in which to open the speed dial menu.

Type:

String

Default Value: 'auto'
Accepted Values: 'auto' | 'up' | 'down'

When this option is set to "auto", the direction depends on the FAB's position.

icon

Specifies the icon the FAB displays when the speed dial is closed.

Type:

String

Default Value: 'add'

This option accepts one of the following:

Use this option only if there are two or more SpeedDialAction components on a page. Otherwise, specify the icon option in the SpeedDialAction.

View Demo

label

Specifies the text label displayed inside the FAB.

Type:

String

Default Value: ''

Use this option only if there are two or more SpeedDialAction components on a page. Otherwise, specify the label option in the SpeedDialAction.

maxSpeedDialActionCount

Limits the number of speed dial actions.

Type:

Number

Default Value: 5

position

Positions the FAB on the screen.

Type:

String

|

PositionConfig

|

Function

Default Value: '{ at: "right bottom", my: "right bottom", offset: "-16 -16" }'
Accepted Values: 'bottom' | 'center' | 'left' | 'left bottom' | 'left top' | 'right' | 'right bottom' | 'right top' | 'top'

This option accepts one of the following:

  • Position configuration object
    An object that specifies the widget's position.

  • String
    A shortcut listed in the accepted values. Positions the widget relative to the window.

  • Function
    A function that returns one of the above. Use it to position the widget based on a condition.

Use the PositionAlignment enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Bottom, Center, Left, LeftBottom, LeftTop, RightBottom, RightTop, and Top.

View Demo

shading

If true, the background should be shaded when the speed dial menu is open.

Type:

Boolean

Default Value: false

View Demo