Skip to main content

Floating Action Button

  • 2 minutes to read

The DevExpress ASP.NET Floating Action Button (ASPxFloatingActionButton) is a button that appears in front of a container (HTML element or a control) when an end user interacts with the container’s elements.

FAB-Overview

#Visual Elements

FAB-VisualElements

#Concept

The floating action button provides two types of actions.

  • Action - Executes the action once an end-user clicks the floating action button.
  • Action Group - The floating action button serves as a container for multiple actions. When pressed, the floating action button expands nested actions.

FAB-Concept

You can handle end users’ actions and define the FAB. Refer to the FAB Actions topic for more information.

#Features

Container Element

You can associate the floating action button with any HTML element or web control on a page (ASPxFloatingActionButton.ContainerElementID). The floating action button will be displayed in front of the container.

FAB-Container

Fixed Position

Use the ASPxFloatingActionButton.VerticalPosition and ASPxFloatingActionButton.HorizontalPosition properties to specify the floating action button’s position relative to the container.

FAB-FixedPosition

Appearance

You can specify an image for each floating action button’s type and nested action items.

Element Description
Floating Action Button: collapse and expand images FABActionGroup.ExpandImage, FABActionGroup.CollapseImage
Action Item: Image FABActionItem.Image

FAB-ExpandButton

#Client-Side Functionality

The ASPxClientFloatingActionButton object (the ASPxFloatingActionButton control’s client-side equivalent) provides the floating action button’s client-side APIs.

Property Description
ASPxClientFloatingActionButton.SetActionContext, ASPxClientFloatingActionButton.GetActionContext Gets or sets which action/action group is displayed in response to a user action.
ASPxClientFloatingActionButton.SetHorizontalPosition, ASPxClientFloatingActionButton.SetVerticalPosition Gets or sets the floating action button’s horizontal and vertical position.
ASPxClientFloatingActionButton.SetContainerElement, ASPxClientFloatingActionButton.SetContainerElementID Gets or sets the floating action button’s container element.

#Get Started

Get Started

#Demos