Introducing New Blazor Speed Dial Component | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (173).NET Core  (29).NET MAUI  (203)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (211)BoldSign  (13)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (65)Flutter  (132)JavaScript  (219)Microsoft  (118)PDF  (81)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (897)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (50)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (127)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (63)Development  (618)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (39)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (501)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (42)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (381)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (17)Web  (582)What's new  (323)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Introducing New Blazor Speed Dial Component

Introducing New Blazor Speed Dial Component

The Blazor Speed Dial component is an extended version of the Blazor Floating Action Button (FAB) component. It displays multiple, related action buttons when clicked. It appears on top of the other webpage content, like the Floating Action Button. The component is useful when performing more than one primary action on a webpage is required.

In this blog, you will learn about the key features of the new Syncfusion Blazor Speed Dial component and the procedure to get started using this component in a Blazor application.

Key features of Blazor Speed Dial

The key features of the component:

Built-in support to place the control in different positions

The Blazor Speed Dial component provides different built-in positions. If a target is not specified, Speed Dial is positioned based on the browser viewport.

Different positions of Blazor Speed Dial component
Different positions of Blazor Speed Dial component

Note: For more information, refer to the Blazor Speed Dial Position demo.

Predefined styles for Speed Dial button

Several predefined styles are available:

  • Primary
  • Success
  • Info
  • Warning
  • Danger
Predefined styles of Speed Dial buttons
Predefined styles of Speed Dial buttons

Linear and radial display modes for action items

The Blazor Speed Dial component supports linear and radial display modes for displaying the action items.

Linear

Action items are displayed in a list-like format, either horizontally or vertically, in linear mode. Based on the direction property, we can open the action items on the top, bottom, left, or right side of the main button. For auto positioning, the action items are displayed based on the position of the Speed Dial. Action items are shown as a horizontal list for the left and right sides and a vertical list at the top and bottom.

Linear display mode support for action items
Linear display mode support for action items

Radial

In radial mode, action items are displayed in a circular pattern like a radial menu. The start and end angles for radial arrangement are auto-calculated based on position when the start and end angles are not specified.

Radial display mode support for action items
Radial display mode support for action items

Note: For more details, refer to the Blazor Speed Dial Radial Menu demo.

Icon and action items customization

You can easily customize the Speed Dial button and action buttons as:

  • Text only.
  • Icon with text.
  • Icon only.
Icon and action items customization in Balzor Speed Dial
Icon and action items customization

Note: For more details, refer to the Blazor Speed Dial Icon Customization demo.

Template customization

Customize the action buttons and the entire pop-up of the speed dial using templates.

Template customization in Blazor Speed Dial control
Template customization

Note: For more details, refer to Blazor Speed Dial Template Customization demo.

WAI-ARIA compliance and keyboard accessibility

We have designed the Speed Dial component based on WAI-ARIA specifications, applying WAI-ARIA roles, states, properties, and keyboard support for people who use assistive devices.

You can easily interact with the Blazor Speed Dial component using the following keyboard shortcuts, too.

KeyFunctionality
Arrow keysNavigate among the action items.
HomeNavigate to the first action item.
EndNavigate to the last action item.
EnterOpens and closes the action items.

Triggers item click when an action item is focused.

Getting started with Blazor Speed Dial component

Let’s see the steps to configure the Blazor Speed Dial component in Blazor Server and WebAssembly apps.

Step 1: Create Blazor Server or Blazor WebAssembly app

  1. Ensure all prerequisites needed to run the Blazor app are installed.
  2. Create a Blazor Server app or Blazor WebAssembly app using Visual Studio in one of the following:
    1. Create a Project using Microsoft Templates
    2. Create a Project using Syncfusion Blazor Extension

Step 2: Add the Blazor Speed Dial NuGet reference.

Syncfusion Blazor components are available at NuGet Gallery. To use Syncfusion Blazor components in an application, add a reference to the corresponding package. Refer to NuGet packages for the available NuGet packages list with component details and the benefits of using individual NuGet packages.

To add the Blazor Speed Dial component to your app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), and search for Syncfusion.Blazor.Buttons, and then install it.

Step 3: Register Syncfusion Blazor Service.

Open the ~/_Imports.razor file and import the Syncfusion.Blazor namespace. Then:

  • For a Blazor Server app, register the Syncfusion Blazor Service in the ~/Program.cs file for .NET 6 & above and in the ~/Startup.cs file for .NET 5 and .NET 3.X projects.
  • For a Blazor WASM app, open the ~/Program.cs file and register the Syncfusion Blazor Service in the client web app.

Blazor Server App (.NET 6)

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSyncfusionBlazor();

var app = builder.Build();
....

Blazor Web Assembly App (.NET 6)

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Syncfusion.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(serviceProvider => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services.AddSyncfusionBlazor();
await builder.Build().RunAsync();
....

Step 4: Add style sheet and script references.

To add a theme to the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), and search for Syncfusion.Blazor.Themes, and then install it. Then, you can refer the theme style sheet from NuGet as follows:

  • For a Blazor WASM app, reference scripts in the ~/wwwroot/index.html file.
  • For a Blazor Server app, reference scripts in the ~/Pages/_Layout.cshtml file for a .NET 6 project and in the ~/Pages/_Host.cshtml file for a .NET 5 or .NET Core 3.X project.
<head>
    ...
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
    <!--Reference theme style sheet as below if you are using Syncfusion.Blazor Single NuGet-->
    <!--<link href="_content/Syncfusion.Blazor/styles/bootstrap5.css" rel="stylesheet" />-->
</head>

Step 5: Add script reference.

Check out this documentation to learn different ways to add script references in a Blazor application. In this getting started walk-through, the required scripts are referenced using Static Web Assets externally inside the <head>:

  • For a Blazor WASM app, reference scripts in the ~/wwwroot/index.html file.
  • For a Blazor Server app, reference scripts in the ~/Pages/_Layout.cshtml file for .NET 6 project and in ~/Pages/_Host.cshtml file for .NET 5 and .NET Core 3.X project.
<head>
    ....
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
    <!--Use below script reference if you are using Syncfusion.Blazor Single NuGet-->
    <!--<script  src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js"  type="text/javascript"></script>-->
</head>

Step 6: Add Blazor Speed Dial component.

Add the Syncfusion Blazor Speed Dial component in the Razor file with its items.

@using Syncfusion.Blazor.Buttons

<div id="target" style="min-height:200px; position:relative; width:300px; border:1px solid;">
    <SfSpeedDial Target="#target" OpenIconCss="e-icons e-edit" Position=FabPosition.BottomLeft ItemClicked="clicked" Mode=SpeedDialMode.Radial>        
        <SpeedDialItems>
            <SpeedDialItem ID="cut" IconCss="e-icons e-cut" />
            <SpeedDialItem ID="copy" IconCss="e-icons e-copy" />
            <SpeedDialItem ID="paste" IconCss="e-icons e-paste" />
        </SpeedDialItems>
    </SfSpeedDial>
</div>

@code {
    private void clicked(SpeedDialItemEventArgs args)
    {
        switch(args.Item.ID) {
            case "cut":
                //Perform Cut action.
                break;
            case "copy":
                //Perform Copy action.
                break;
            case "paste":
                //Perform Paste action.
                break;
        }
    }
}

You can customize the Speed Dial position using the Position property and the Mode property to display the menu in linear order like a list or a radial menu in a circular pattern. Also, the Speed Dial control triggers the ItemClicked event with the SpeedDialItemEventArgs argument when an action item is clicked. You can use this event to perform the required action.

Conclusion

I hope you enjoyed learning about the new Syncfusion Blazor Speed Dial component and its features. This control is available in our 2022 Volume 3 release. Check out our Release Notes and What’s New pages to discover all the new updates in this release. Try them out and share your thoughts in the comments section below!

For current customers, the new version is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out our newest features.

You can also contact us through our support forumssupport portal, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed