Vue 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:

FloatingActionButtonDirection

Default Value: 'auto'

When this property 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 property accepts one of the following:

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

View Demo

label

Specifies the text label displayed inside the FAB.

Type:

String

Default Value: ''

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

maxSpeedDialActionCount

Limits the number of speed dial actions.

Type:

Number

Default Value: 5

position

Positions the FAB on the screen.

Type:

PositionAlignment

|

PositionConfig

|

Function

Default Value: '{ at: "right bottom", my: "right bottom", offset: "-16 -16" }'

This property accepts one of the following:

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

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

  • Function (deprecated since v21.2)
    Refer to the W0018 warning description for information on how to migrate to other property values.

View Demo

shading

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

Type:

Boolean

Default Value: false

View Demo