ContextQMD
Back to Devexpress

Floating Action Button

aspnet-120655-components-site-navigation-and-layout-floating-action-button.md

latest4.0 KB
Original Source

Floating Action Button

  • Jul 14, 2021
  • 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.

Visual Elements

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.

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.

Fixed Position

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

Appearance

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

ElementDescription
Floating Action Button: collapse and expand imagesFABActionGroup.ExpandImage, FABActionGroup.CollapseImage
Action Item: ImageFABActionItem.Image

Client-Side Functionality

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

PropertyDescription
ASPxClientFloatingActionButton.SetActionContext, ASPxClientFloatingActionButton.GetActionContextGets or sets which action/action group is displayed in response to a user action.
ASPxClientFloatingActionButton.SetHorizontalPosition, ASPxClientFloatingActionButton.SetVerticalPositionGets or sets the floating action button’s horizontal and vertical position.
ASPxClientFloatingActionButton.SetContainerElement, ASPxClientFloatingActionButton.SetContainerElementIDGets or sets the floating action button’s container element.

Get Started

Get Started

Demos