From e102f6433444a94c8cb97b90c0e2694da1015477 Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Wed, 8 Oct 2025 10:02:23 +0400 Subject: [PATCH 1/3] FAB: update Getting Started --- ...ing Started with Floating Action Button.md | 43 +----- .../10 Single Action.md | 8 +- .../20 Multiple Actions (Speed Dial).md | 8 +- .../30 Handle Screen Transitions.md | 139 +++++------------- 4 files changed, 48 insertions(+), 150 deletions(-) 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 index 88bb2f95fc..840691b4f9 100644 --- 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: Material Design Guidelines. +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 Ionicons library. If you are going to replicate the examples in your application, reference the Ionicons stylesheet within in the `` section of your page: - - - - - -##### Angular - -Code examples in this tutorial use icons from the Ionicons 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 Ionicons 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 Ionicons 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 \ No newline at end of file +This tutorial demonstrates how to create single- and multi-action FABs, and how to update action sets during screen transitions. \ No newline at end of file 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 index 6b920e6a3b..c1128ba84a 100644 --- 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:
-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/" 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 index 3e4ba76d5e..0f588ffe7c 100644 --- 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).
-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/" 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 index cf8436e1b4..848df7c799 100644 --- 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 @@ -1,33 +1,33 @@ -Different screens use different FABs because a FAB should perform or contain only actions that can be performed on a particular screen. The DevExtreme [TabPanel](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TabPanel/Overview/) is used to emulate switching between screens. +In this example, each screen has a distinct FAB, as each FAB contains only actions for that screen. The DevExtreme [TabPanel](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TabPanel/Overview/) emulates screen switching:
--- ##### jQuery -To implement this behavior, change the [visible](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#visible') property of each SpeedDialAction when the screen is switched. Set this property to **true** if an action can be performed on the current screen. Otherwise, set it to **false**. +Change the [visible](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#visible') property of each SpeedDialAction when the screen changes. Set **visible** to `true` if the action applies to the current screen. Otherwise, set it to `false`. ##### Angular -To implement this behavior, you can place the actions in separate components if the components have different URLs. No further configuration is required in this case. +Separate actions into different components when components use different URLs. No extra configuration is needed. -The approach is different if the components have the same URL, or actions are in the same component. Change the [visible](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#visible') property of each SpeedDialAction when the screen is switched. Set this property to **true** if an action can be performed on the current screen. Otherwise, set it to **false**. +If components share a URL or actions exist in the same component, update the [visible](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#visible') property of each SpeedDialAction when the screen changes. Set **visible** to `true` if the action applies to the current screen. Otherwise, set it to `false`. ##### Vue -To implement this behavior, you can place the actions in separate components if the components have different URLs. No further configuration is required in this case. +Separate actions into different components when components use different URLs. No extra configuration is needed. -The approach is different if the components have the same URL, or actions are in the same component. Change the [visible](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#visible') property of each SpeedDialAction when the screen is switched. Set this property to **true** if an action can be performed on the current screen. Otherwise, set it to **false**. +If components share a URL or actions exist in the same component, update the [visible](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#visible') property of each SpeedDialAction when the screen changes. Set **visible** to `true` if the action applies to the current screen. Otherwise, set it to `false`. ##### React -To implement this behavior, you can place the actions in separate components if the components have different URLs. No further configuration is required in this case. +Separate actions into different components when components use different URLs. No extra configuration is needed. -The approach is different if the components have the same URL, or actions are in the same component. Change the [visible](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#visible') property of each SpeedDialAction when the screen is switched. Set this property to **true** if an action can be performed on the current screen. Otherwise, set it to **false**. +If components share a URL or actions exist in the same component, update the [visible](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#visible') property of each SpeedDialAction when the screen changes. Set **visible** to `true` if the action applies to the current screen. Otherwise, set it to `false`. --- -The following code shows the TabPanel configuration and an empty `switchSDA` function. This function controls the actions' visibility when it is implemented later. +The following code includes the TabPanel configuration and an empty `switchSDA` function. Implement `switchSDA` to control actions’ visibility: --- ##### jQuery @@ -66,9 +66,6 @@ The following code shows the TabPanel configuration and an empty `switchSDA` fun - - - @@ -166,55 +163,6 @@ The following code shows the TabPanel configuration and an empty `switchSDA` fun justify-content: center; } - - import { BrowserModule } from '@angular/platform-browser'; - import { NgModule } from '@angular/core'; - import { AppComponent } from './app.component'; - - import { DxTabPanelModule, DxSpeedDialActionModule } from 'devextreme-angular'; - - @NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - DxTabPanelModule, - DxSpeedDialActionModule - ], - providers: [ ], - bootstrap: [AppComponent] - }) - export class AppModule { } - - - { - // ... - "projects": { - "ng-app": { - // ... - "architect": { - "build": { - "options": { - // ... - "styles": [ - "node_modules/devextreme/dist/css/dx.material.blue.light.css", - // Custom icons by Ionicons - "node_modules/ionicons/dist/css/ionicons.css", - "src/styles.css" - ], - // ... - }, - // ... - }, - // ... - } - }, - // ... - }, - // ... - } - ##### Vue @@ -239,23 +187,11 @@ The following code shows the TabPanel configuration and an empty `switchSDA` fun + - ##### React // ... + import { useCallback, useState } from 'react'; + import TabPanel, { Item } from 'devextreme-react/tab-panel'; import SpeedDialAction from 'devextreme-react/speed-dial-action'; import config from 'devextreme/core/config'; + import type { GlobalConfig } from 'devextreme/common'; import notify from 'devextreme/ui/notify'; + import type { TabPanelTypes } from 'devextreme-react/tab-panel'; + import type { Properties as ToastProperties } from 'devextreme/ui/toast'; - class App extends React.Component { - constructor(props) { - super(props); - config({ - floatingActionButtonConfig: { - icon: 'icon ion-md-share', - position: { - my: 'right bottom', - at: 'right bottom', - of: '#app-container', - offset: '-16 -16' - } - } - }); - this.state = { - currentTab: 'Edit tab' - } - this.switchSDAs = this.switchSDAs.bind(this); - } + const globalConfig: GlobalConfig = { + floatingActionButtonConfig: { + icon: 'share', + position: { + my: 'right bottom', + at: 'right bottom', + of: '#app-container', + offset: '-16 -16', + }, + }, + }; - switchSDAs(e) { - this.setState({ - currentTab: e.addedItems[0].title - }); - } - - render() { - return ( -
- {/* TabPanel is configured here */} - showNotification('Edit is clicked')} - /> - showNotification('Copied to clipboard')} - /> - showNotification('Sent by email')} - /> - showNotification('Shared on Facebook')} - /> -
- ); - } - } + config(globalConfig); - function showNotification(message) { - notify({ - message: message, + function showNotification(message: string): void { + const options: ToastProperties = { + message, position: { my: 'left bottom', at: 'left bottom', of: '#app-container', - offset: '16 -16' + offset: '16 -16', + }, + width: 320 * 0.7, + minWidth: 0, + }; + + notify(options, 'info', 1000); + } + + function App(): JSX.Element { + const [currentTab, setCurrentTab] = useState('Edit tab'); + + const switchSDAs = useCallback( + (e: TabPanelTypes.SelectionChangedEvent): void => { + setCurrentTab(e.addedItems[0].title); }, - minWidth: null, - width: 320 * 0.7 - }, 'info', 1000); + [], + ); + + const handleEditClick = useCallback((): void => { + showNotification('Edit is clicked'); + }, []); + + const handleCopyClick = useCallback((): void => { + showNotification('Copied to clipboard'); + }, []); + + const handleMailClick = useCallback((): void => { + showNotification('Sent by email'); + }, []); + + const handleSocialClick = useCallback((): void => { + showNotification('Shared on Social Media'); + }, []); + + return ( +
+ + + + + +
+ ); } + export default App; --- From 7c64a182854d26954338f025a3f19bee930c19c1 Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Tue, 28 Oct 2025 16:39:23 +0400 Subject: [PATCH 3/3] Update after review --- ...ing Started with Floating Action Button.md | 4 +-- .../10 Single Action.md | 6 ++--- .../20 Multiple Actions (Speed Dial).md | 4 +-- .../30 Handle Screen Transitions.md | 27 +------------------ 4 files changed, 8 insertions(+), 33 deletions(-) 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 index 840691b4f9..43c5e82125 100644 --- 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 @@ -2,8 +2,8 @@ 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). -Place **only one** FAB on a screen. The actions attached to the FAB can vary between screens. +[note] Place **only one** FAB on a screen. In DevExtreme, the FAB acts as a container for [SpeedDialAction](/api-reference/10%20UI%20Components/dxSpeedDialAction '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/') components. -This tutorial demonstrates how to create single- and multi-action FABs, and how to update action sets during screen transitions. \ No newline at end of file +This tutorial demonstrates how to create single and multi-action FABs, and how to update action sets during screen transitions. \ No newline at end of file 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 index c1128ba84a..9776e221a0 100644 --- 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 @@ -2,11 +2,11 @@ A single-action FAB triggers the main screen action:
-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'). +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. Optionally, define a [hint](/api-reference/10%20UI%20Components/Widget/1%20Configuration/hint.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#hint'). -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/'). +Define 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/') to specify the FAB's position. -See the code example in the GitHub repository: +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-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 index 0f588ffe7c..4e5545316e 100644 --- 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 @@ -2,11 +2,11 @@ A FAB can open a menu with multiple related actions (speed dial).
-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'). +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'). 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. -See the code example in the GitHub repository: +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 index 1aa72a0479..cdfdca3e15 100644 --- 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 @@ -1,32 +1,7 @@ -In this example, each screen has a distinct FAB, as each FAB contains only actions for that screen. The DevExtreme [TabPanel](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TabPanel/Overview/) emulates screen switching: +In the following example, each screen has a distinct FAB, as each FAB contains only actions for that screen. The DevExtreme [TabPanel](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TabPanel/Overview/) emulates screen switching:
---- -##### jQuery - -Change the [visible](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#visible') property of each SpeedDialAction when the screen changes. Set **visible** to `true` if the action applies to the current screen. Otherwise, set it to `false`. - -##### Angular - -Separate actions into different components when components use different URLs. No extra configuration is needed. - -If components share a URL or actions exist in the same component, update the [visible](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#visible') property of each SpeedDialAction when the screen changes. Set **visible** to `true` if the action applies to the current screen. Otherwise, set it to `false`. - -##### Vue - -Separate actions into different components when components use different URLs. No extra configuration is needed. - -If components share a URL or actions exist in the same component, update the [visible](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#visible') property of each SpeedDialAction when the screen changes. Set **visible** to `true` if the action applies to the current screen. Otherwise, set it to `false`. - -##### React - -Separate actions into different components when components use different URLs. No extra configuration is needed. - -If components share a URL or actions exist in the same component, update the [visible](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#visible') property of each SpeedDialAction when the screen changes. Set **visible** to `true` if the action applies to the current screen. Otherwise, set it to `false`. - ---- - The following code includes the TabPanel configuration and an empty `switchSDA` function. Implement `switchSDA` to control action visibility: ---