[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
   Getting Started
  [Expand]Grid View
  [Expand]Tree List
  [Expand]Gantt
  [Expand]Card View
   Reporting
  [Expand]Chart Control
  [Expand]Pivot Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Scheduler
  [Collapse]Site Navigation and Layout
   [Expand]Product Information
   [Collapse]Floating Action Button
    [Expand]Concepts
     Getting Started
   [Expand]Form Layout
   [Expand]Menu
   [Expand]Navigation Bar
   [Expand]Page Control and Tab Control
    Panel
   [Expand]Ribbon
    Site Map Control
   [Expand]Splitter
   [Expand]Tag Cloud Control
   [Expand]Title Index
   [Expand]Tree View
  [Expand]HTML Editor
  [Expand]Gauges
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Controls
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Floating Action Button

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.

Expanded Visual Elements

Expanded 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.

Expanded 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.

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

Expanded 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.

Expanded Getting Started

Expanded Demos

Is this topic helpful?​​​​​​​