FAB: update Getting Started (DevExpress#8109) (DevExpress#8151)

vladaskorohodova · web-flow · commit f1719bf12331 · 2025-10-29T11:27:03.000+04:00
diff --git a/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/00 Getting Started with Floating Action Button.md b/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/00 Getting Started with Floating Action Button.md
@@ -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>.
+[note] Place **only one** FAB on a screen.
 
-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/ionicons@4.6.3/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.
diff --git a/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/10 Single Action.md b/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/10 Single Action.md
@@ -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_2/GettingStartedWith/FloatingActionButton/SingleAction/index.html, /Content/Applications/25_2/GettingStartedWith/FloatingActionButton/SingleAction/index.js, /Content/Applications/25_2/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 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. You can also 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.
+Set the FAB's [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.
+The code example is available in the following GitHub repository:
 
 #include btn-open-github with {
     href: "https://github.com/DevExpress-Examples/getting-started-with-floating-action-button-single-action/"
diff --git a/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/20 Multiple Actions (Speed Dial).md b/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/20 Multiple Actions (Speed Dial).md
@@ -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_2/GettingStartedWith/FloatingActionButton/MultipleActions/index.html, /Content/Applications/25_2/GettingStartedWith/FloatingActionButton/MultipleActions/index.js, /Content/Applications/25_2/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. FAB sorts actions by [index](/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 following GitHub repository:
 
 #include btn-open-github with {
     href: "https://github.com/DevExpress-Examples/getting-started-with-floating-action-button-speed-dial/"
diff --git a/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/30 Handle Screen Transitions.md b/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/30 Handle Screen Transitions.md
