DevExtreme Angular - Getting Started with Floating Action Button

NOTE
Before starting the tutorial, make sure that you have installed DevExtreme in your application as described in the Installation section (for JavaScript libraries), the Getting Started article (for ASP.NET MVC 5 Controls), or the Configure a Visual Studio Project article (for ASP.NET Core Controls).

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 perform an action or open a stack of 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. To find more details on the FAB concept and best practices, refer to the Material Design Guidelines.

In DevExtreme, the FAB is implemented as a container that collects and stores SpeedDialAction components.

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

NOTE

Code examples in this tutorial use icons from the Ionicons library. If you are going to replicate the examples in your Angular, Vue, or React application, install the ionicons npm package:

  • npm install ionicons --save

With jQuery, reference the Ionicons stylesheet in the <head> of your page:

HTML
  • <link rel="stylesheet" href="https://unpkg.com/ionicons@4.6.3/dist/css/ionicons.min.css">

Single Action

A single-action FAB represents the primary action of a screen. According to the guidelines, this action should be constructive, such as, create, share, explore, or edit, as in the following example:

To create a single-action FAB, add one SpeedDialAction to your page and specify its onClick and icon options. Setting other options is not required, but we also specify a hint.

To position the FAB, use the floatingActionButtonConfig.position option in the globalConfig object.

The following code, which configures the example above, illustrates the described techniques:

app.component.html
app.component.ts
app.component.css
app.module.ts
angular.json
  • <div id="app-container">
  • <p>View's content</p>
  • <dx-speed-dial-action
  • hint="Edit"
  • icon="icon ion-md-create"
  • (onClick)="showNotification('Edit is clicked')">
  • </dx-speed-dial-action>
  • </div>
  • import { Component } from '@angular/core';
  • import notify from 'devextreme/ui/notify';
  • import config from 'devextreme/core/config';
  •  
  • config({
  • floatingActionButtonConfig: {
  • position: {
  • my: 'right bottom',
  • at: 'right bottom',
  • of: '#app-container',
  • offset: '-16 -16'
  • }
  • }
  • });
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  • showNotification(message: string) {
  • notify({
  • message: message,
  • position: {
  • my: 'left bottom',
  • at: 'left bottom',
  • of: '#app-container',
  • offset: '16 -16'
  • },
  • minWidth: null,
  • width: 320 * 0.7
  • }, 'info', 1000);
  • }
  • }
  • ::ng-deep .dx-fa-button-icon {
  • text-align: center;
  • }
  •  
  • p {
  • text-align: center;
  • }
  •  
  • #app-container {
  • height: 360px;
  • width: 320px;
  • }
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import { DxSpeedDialActionModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxSpeedDialActionModule
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }
  • {
  • // ...
  • "projects": {
  • "ng-app": {
  • // ...
  • "architect": {
  • "build": {
  • "options": {
  • // ...
  • "styles": [
  • "node_modules/devextreme/dist/css/dx.common.css",
  • "node_modules/devextreme/dist/css/dx.material.blue.light.css",
  • // Custom icons by Ionicons
  • "node_modules/ionicons/dist/css/ionicons.css",
  • "src/styles.css"
  • ],
  • // ...
  • },
  • // ...
  • },
  • // ...
  • }
  • },
  • // ...
  • },
  • // ...
  • }

Multiple Actions (Speed Dial)

The FAB can open a menu with several related actions (speed dial).

To create a FAB that opens a speed dial, add up to five SpeedDialAction components to a page, each with an individual icon and onClick event handler. The actions are sorted according to their indexes.

FAB parameters are configured in the floatingActionButtonConfig object. Use it to change the FAB's position, maximum number of actions, icons in the open and close states, and other parameters.

The following code configures the example above and shows how to set the described options:

app.component.html
app.component.ts
app.component.css
app.module.ts
angular.json
  • <div id="app-container">
  • <p>View's content</p>
  • <dx-speed-dial-action
  • hint="Copy to clipboard"
  • icon="icon ion-md-copy"
  • (onClick)="showNotification('Copied to clipboard')">
  • </dx-speed-dial-action>
  • <dx-speed-dial-action
  • hint="Send by email"
  • icon="icon ion-md-mail"
  • (onClick)="showNotification('Sent by email')">
  • </dx-speed-dial-action>
  • <dx-speed-dial-action
  • hint="Share on Facebook"
  • icon="icon ion-logo-facebook"
  • (onClick)="showNotification('Shared on Facebook')">
  • </dx-speed-dial-action>
  • </div>
  • import { Component } from '@angular/core';
  • import notify from 'devextreme/ui/notify';
  • import config from 'devextreme/core/config';
  •  
  • config({
  • floatingActionButtonConfig: {
  • icon: 'icon ion-md-share',
  • position: {
  • my: 'right bottom',
  • at: 'right bottom',
  • of: '#app-container',
  • offset: '-16 -16'
  • }
  • }
  • });
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  • showNotification(message: string) {
  • notify({
  • message: message,
  • position: {
  • my: 'left bottom',
  • at: 'left bottom',
  • of: '#app-container',
  • offset: '16 -16'
  • },
  • minWidth: null,
  • width: 320 * 0.7
  • }, 'info', 1000);
  • }
  • }
  • ::ng-deep .dx-fa-button-icon, .dx-fa-button-icon-close {
  • text-align: center;
  • }
  •  
  • p {
  • text-align: center;
  • }
  •  
  • #app-container {
  • height: 360px;
  • width: 320px;
  • }
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import { DxSpeedDialActionModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxSpeedDialActionModule
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }
  • {
  • // ...
  • "projects": {
  • "ng-app": {
  • // ...
  • "architect": {
  • "build": {
  • "options": {
  • // ...
  • "styles": [
  • "node_modules/devextreme/dist/css/dx.common.css",
  • "node_modules/devextreme/dist/css/dx.material.blue.light.css",
  • // Custom icons by Ionicons
  • "node_modules/ionicons/dist/css/ionicons.css",
  • "src/styles.css"
  • ],
  • // ...
  • },
  • // ...
  • },
  • // ...
  • }
  • },
  • // ...
  • },
  • // ...
  • }

Handle Screen Transitions

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 is used to emulate switching between screens.

To implement this behavior in Angular, Vue, and React, you can place the actions in separate components if the components have different URLs. No further configuration is required in this case.

The approach is different if the components have the same URL, or actions are in the same component, or when you configure this behavior in jQuery. Change the visible option of each SpeedDialAction when the screen is switched. Set this option to true if an action can be performed on 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.

app.component.html
app.component.ts
app.component.css
app.module.ts
angular.json
  • <div id="app-container">
  • <dx-tab-panel
  • (onSelectionChanged)="switchSDAs($event)">
  • <dxi-item title="Edit tab">
  • <p>Edit tab's content</p>
  • </dxi-item>
  • <dxi-item title="Share tab">
  • <p>Share tab's content</p>
  • </dxi-item>
  • </dx-tab-panel>
  • <!-- To be implemented -->
  • </div>
  • import { Component } from '@angular/core';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  • switchSDAs(e) {
  • // To be implemented
  • this.currentTab = e.addedItems[0].title;
  • }
  • }
  • ::ng-deep .dx-fa-button-icon, .dx-fa-button-icon-close {
  • text-align: center;
  • }
  •  
  • p {
  • text-align: center;
  • }
  •  
  • #app-container {
  • height: 360px;
  • width: 320px;
  • }
  •  
  • ::ng-deep .dx-tabpanel .dx-tabs-wrapper {
  • display: flex;
  • flex-flow: row nowrap;
  • }
  •  
  • ::ng-deep .dx-tab {
  • display: flex;
  • flex-flow: row nowrap;
  • flex: 1;
  • 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.common.css",
  • "node_modules/devextreme/dist/css/dx.material.blue.light.css",
  • // Custom icons by Ionicons
  • "node_modules/ionicons/dist/css/ionicons.css",
  • "src/styles.css"
  • ],
  • // ...
  • },
  • // ...
  • },
  • // ...
  • }
  • },
  • // ...
  • },
  • // ...
  • }

The following code adds four SpeedDialActions to the page, but only the "Edit" action is visible at launch. The switchSDA function changes the actions' visibility based on the selected tab:

app.component.html
app.component.ts
  • <div id="app-container">
  • <!-- TabPanel is configured here -->
  • <!-- ... -->
  • <dx-speed-dial-action
  • hint="Edit"
  • icon="icon ion-md-create"
  • [visible]="currentTab === 'Edit tab'"
  • (onClick)="showNotification('Edit is clicked')">
  • </dx-speed-dial-action>
  •  
  • <dx-speed-dial-action
  • hint="Copy to clipboard"
  • icon="icon ion-md-copy"
  • [visible]="currentTab === 'Share tab'"
  • (onClick)="showNotification('Copied to clipboard')">
  • </dx-speed-dial-action>
  • <dx-speed-dial-action
  • hint="Send by email"
  • icon="icon ion-md-mail"
  • [visible]="currentTab === 'Share tab'"
  • (onClick)="showNotification('Sent by email')">
  • </dx-speed-dial-action>
  • <dx-speed-dial-action
  • hint="Share on Facebook"
  • icon="icon ion-logo-facebook"
  • [visible]="currentTab === 'Share tab'"
  • (onClick)="showNotification('Shared on Facebook')">
  • </dx-speed-dial-action>
  • </div>
  • import { Component } from '@angular/core';
  • import notify from 'devextreme/ui/notify';
  • import config from 'devextreme/core/config';
  •  
  • config({
  • floatingActionButtonConfig: {
  • icon: 'icon ion-md-share',
  • position: {
  • my: 'right bottom',
  • at: 'right bottom',
  • of: '#app-container',
  • offset: '-16 -16'
  • }
  • }
  • });
  • // ...
  • export class AppComponent {
  • constructor() {
  • this.currentTab = 'Edit tab';
  • }
  • currentTab: string;
  • switchSDAs(e) {
  • this.currentTab = e.addedItems[0].title;
  • }
  • showNotification(message: string) {
  • notify({
  • message: message,
  • position: {
  • my: 'left bottom',
  • at: 'left bottom',
  • of: '#app-container',
  • offset: '16 -16'
  • },
  • minWidth: null,
  • width: 320 * 0.7
  • }, 'info', 1000);
  • }
  • }

For more information on the Floating Action Button's functionality, explore the following resources: