Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,44 +1,9 @@
#include tutorials-intro-installationnote

The Floating Action Button (FAB) is the primary action button on a screen that is displayed in front of all screen content. The FAB can execute an action or open a stack of two to five related actions (speed dial).
The Floating Action Button (FAB) sits above all screen content and triggers a primary action. FAB either executes a single action or expands to display two to five related actions (speed dial).

There should be **only one** FAB on a screen, but its action(s) can be different for different screens. For more details on the FAB concept and best practices, refer to the following topic: <a href="https://material.io/design/components/buttons-floating-action-button.html" target="_blank">Material Design Guidelines</a>.
Place **only one** FAB on a screen. The actions attached to the FAB can vary between screens.

In DevExtreme, the FAB is implemented as a container that collects and stores [SpeedDialAction](/api-reference/10%20UI%20Components/dxSpeedDialAction '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/') components.
In DevExtreme, the FAB acts as a container for [SpeedDialAction](/api-reference/10%20UI%20Components/dxSpeedDialAction '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/') components.

From this tutorial, you will learn how to create a single- or multi-action FAB and alter action sets during screen transitions.

[note]

---
##### jQuery

Code examples in this tutorial use icons from the <a href="https://ionicons.com" target="_blank">Ionicons</a> library. If you are going to replicate the examples in your application, reference the Ionicons stylesheet within in the `<head>` section of your page:

<!--HTML-->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css">


##### Angular

Code examples in this tutorial use icons from the <a href="https://ionicons.com" target="_blank">Ionicons</a> library. If you are going to replicate the examples in your application, install the `ionicons` npm package:

npm install ionicons@4 --save

##### Vue

Code examples in this tutorial use icons from the <a href="https://ionicons.com" target="_blank">Ionicons</a> library. If you are going to replicate the examples in your application, install the `ionicons` npm package:

npm install ionicons@4 --save

##### React

Code examples in this tutorial use icons from the <a href="https://ionicons.com" target="_blank">Ionicons</a> library. If you are going to replicate the examples in your application, install the `ionicons` npm package:

npm install ionicons@4 --save

---

[/note]

[tags]dxspeeddialaction
This tutorial demonstrates how to create single- and multi-action FABs, and how to update action sets during screen transitions.
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
A single-action FAB represents the primary action of a screen. According to the [guidelines](https://material.io/design/components/buttons-floating-action-button.html#usage), this action should be constructive, such as, create, share, explore, or edit, as in the following example:
A single-action FAB triggers the main screen action:

<div class="simulator-desktop-container" style="height:362px" data-view="/Content/Applications/25_1/GettingStartedWith/FloatingActionButton/SingleAction/index.html, /Content/Applications/25_1/GettingStartedWith/FloatingActionButton/SingleAction/index.js, /Content/Applications/25_1/GettingStartedWith/FloatingActionButton/SingleAction/index.css"></div>

To create a single-action FAB, add one [SpeedDialAction](/api-reference/10%20UI%20Components/dxSpeedDialAction '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/') to your page and specify its [onClick](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/onClick.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#onClick') and [icon](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/icon.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#icon') properties. Other properties are optional, but we also specify a [hint](/api-reference/10%20UI%20Components/Widget/1%20Configuration/hint.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#hint').
Add one [SpeedDialAction](/api-reference/10%20UI%20Components/dxSpeedDialAction '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/') to the page. Specify its [onClick](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/onClick.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#onClick') and [icon](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/icon.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#icon') properties. Optionally, define a [hint](/api-reference/10%20UI%20Components/Widget/1%20Configuration/hint.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#hint').

To position the FAB, use the [floatingActionButtonConfig](/api-reference/50%20Common/Object%20Structures/GlobalConfig/floatingActionButtonConfig '/Documentation/ApiReference/Common/Object_Structures/GlobalConfig/floatingActionButtonConfig/').[position](/api-reference/50%20Common/Object%20Structures/GlobalConfig/floatingActionButtonConfig/position.md '/Documentation/ApiReference/Common/Object_Structures/GlobalConfig/floatingActionButtonConfig/#position') property in the [GlobalConfig](/api-reference/50%20Common/Object%20Structures/GlobalConfig '/Documentation/ApiReference/Common/Object_Structures/GlobalConfig/') object.
Specify the FAB's position using the [position](/api-reference/50%20Common/Object%20Structures/GlobalConfig/floatingActionButtonConfig/position.md '/Documentation/ApiReference/Common/Object_Structures/GlobalConfig/floatingActionButtonConfig/#position') property in [GlobalConfig](/api-reference/50%20Common/Object%20Structures/GlobalConfig '/Documentation/ApiReference/Common/Object_Structures/GlobalConfig/').

Refer to the GitHub repository for the code that configures the example above and illustrates the described techniques.
See the code example in the GitHub repository:

#include btn-open-github with {
href: "https://github.com/DevExpress-Examples/getting-started-with-floating-action-button-single-action/"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
The FAB can open a menu with several related actions (speed dial).
A FAB can open a menu with multiple related actions (speed dial).

<div class="simulator-desktop-container" style="height:362px" data-view="/Content/Applications/25_1/GettingStartedWith/FloatingActionButton/MultipleActions/index.html, /Content/Applications/25_1/GettingStartedWith/FloatingActionButton/MultipleActions/index.js, /Content/Applications/25_1/GettingStartedWith/FloatingActionButton/MultipleActions/index.css"></div>

To create a FAB that opens a speed dial, add multiple [SpeedDialAction](/api-reference/10%20UI%20Components/dxSpeedDialAction '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/') components to a page, each with an individual [icon](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/icon.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#icon') and [onClick](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/onClick.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#onClick') event handler. The actions are sorted according to their [indexes](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/index.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#index').
To create a FAB that triggers a speed dial, place multiple [SpeedDialAction](/api-reference/10%20UI%20Components/dxSpeedDialAction '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/') components on the page. Assign a unique [icon](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/icon.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#icon') and [onClick](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/onClick.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#onClick') event handler to each action. Actions display in order of their [indexes](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/index.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#index').

FAB parameters are configured in the [floatingActionButtonConfig](/api-reference/50%20Common/Object%20Structures/GlobalConfig/floatingActionButtonConfig '/Documentation/ApiReference/Common/Object_Structures/GlobalConfig/floatingActionButtonConfig/') object. Use it to change the FAB's [position](/api-reference/50%20Common/Object%20Structures/GlobalConfig/floatingActionButtonConfig/position.md '/Documentation/ApiReference/Common/Object_Structures/GlobalConfig/floatingActionButtonConfig/#position'), [maximum number of actions](/api-reference/50%20Common/Object%20Structures/GlobalConfig/floatingActionButtonConfig/maxSpeedDialActionCount.md '/Documentation/ApiReference/Common/Object_Structures/GlobalConfig/floatingActionButtonConfig/#maxSpeedDialActionCount'), icons in the [open](/api-reference/50%20Common/Object%20Structures/GlobalConfig/floatingActionButtonConfig/icon.md '/Documentation/ApiReference/Common/Object_Structures/GlobalConfig/floatingActionButtonConfig/#icon') and [close](/api-reference/50%20Common/Object%20Structures/GlobalConfig/floatingActionButtonConfig/closeIcon.md '/Documentation/ApiReference/Common/Object_Structures/GlobalConfig/floatingActionButtonConfig/#closeIcon') states, and other parameters.
Define general FAB options in the [floatingActionButtonConfig](/api-reference/50%20Common/Object%20Structures/GlobalConfig/floatingActionButtonConfig '/Documentation/ApiReference/Common/Object_Structures/GlobalConfig/floatingActionButtonConfig/') object. Specify [position](/api-reference/50%20Common/Object%20Structures/GlobalConfig/floatingActionButtonConfig/position.md '/Documentation/ApiReference/Common/Object_Structures/GlobalConfig/floatingActionButtonConfig/#position'), [max speed dial actions](/api-reference/50%20Common/Object%20Structures/GlobalConfig/floatingActionButtonConfig/maxSpeedDialActionCount.md '/Documentation/ApiReference/Common/Object_Structures/GlobalConfig/floatingActionButtonConfig/#maxSpeedDialActionCount'), [icon](/api-reference/50%20Common/Object%20Structures/GlobalConfig/floatingActionButtonConfig/icon.md '/Documentation/ApiReference/Common/Object_Structures/GlobalConfig/floatingActionButtonConfig/#icon'), [closeIcon](/api-reference/50%20Common/Object%20Structures/GlobalConfig/floatingActionButtonConfig/closeIcon.md '/Documentation/ApiReference/Common/Object_Structures/GlobalConfig/floatingActionButtonConfig/#closeIcon'), and other properties.

Refer to the GitHub repository for the code that configures the example above and shows how to set the described properties.
See the code example in the GitHub repository:

#include btn-open-github with {
href: "https://github.com/DevExpress-Examples/getting-started-with-floating-action-button-speed-dial/"
Expand Down
Loading
Loading