Positions in Blazor Speed Dial Component

4 Nov 20253 minutes to read

The SpeedDial component can be positioned anywhere within the specified Target using the Position property. If no Target is defined, the SpeedDial is positioned relative to the browser viewport.

The available position values for the SpeedDial are:

• TopLeft
• TopCenter
• TopRight
• MiddleLeft
• MiddleCenter
• MiddleRight
• BottomLeft
• BottomCenter
• BottomRight

@using Syncfusion.Blazor.Buttons

<SfSpeedDial Content="Add" Position="FabPosition.BottomLeft">
    <SpeedDialItems>
        <SpeedDialItem Text="Cut"/>
        <SpeedDialItem Text="Copy"/>
        <SpeedDialItem Text="Paste"/>
    </SpeedDialItems>
</SfSpeedDial>

Opens on hover

Open the SpeedDial action items on mouse hover by setting the OpensOnHover property to true.

@using Syncfusion.Blazor.Buttons

<SfSpeedDial OpensOnHover=true OpenIconCss="e-icons e-edit" CloseIconCss="e-icons e-close">
    <SpeedDialItems>
        <SpeedDialItem IconCss="e-icons e-cut"/>
        <SpeedDialItem IconCss="e-icons e-copy"/>
        <SpeedDialItem IconCss="e-icons e-paste"/>
    </SpeedDialItems>
</SfSpeedDial>

Programmatically show/hide

Open or close the SpeedDial action items programmatically using the ShowAsync and HideAsync methods. These are asynchronous methods and should be awaited when invoked in an async context.

Below example demonstrates open/close action items on button click.

@using Syncfusion.Blazor.Buttons

<div id="target" style="height:200px; position:relative; width:300px; border:1px solid;">
    <SfButton OnClick="Show">Show</SfButton>
    <SfButton style="float:right"  OnClick="Hide">Hide</SfButton>
    <SfSpeedDial @ref="speeddial" Target="#target" Position="FabPosition.BottomCenter" OpenIconCss="e-icons e-edit" CloseIconCss="e-icons e-close">
        <SpeedDialItems>
            <SpeedDialItem IconCss="e-icons e-cut"/>
            <SpeedDialItem IconCss="e-icons e-copy"/>
            <SpeedDialItem IconCss="e-icons e-paste"/>
        </SpeedDialItems>
    </SfSpeedDial>
</div>

@code{
    SfSpeedDial speeddial;
    public void Show()
    {
        speeddial.ShowAsync();
    }
    public void Hide()
    {
        speeddial.HideAsync();
    }
}

Programmatically refresh the position

Refresh the position of the SpeedDial using the RefreshPositionAsync method when the Target position changes. This asynchronous method should be awaited in an async context.

@using Syncfusion.Blazor.Buttons

<div id="target" style="min-height:350px; position:relative; border:1px solid;">
    <SfButton OnClick="RefreshPosition">Refresh</SfButton>
    <SfSpeedDial @ref="speeddial" Target="#target" Position="FabPosition.MiddleRight" OpenIconCss="e-icons e-edit" CloseIconCss="e-icons e-close">
        <SpeedDialItems>
            <SpeedDialItem IconCss="e-icons e-cut"/>
            <SpeedDialItem IconCss="e-icons e-copy"/>
            <SpeedDialItem IconCss="e-icons e-paste"/>
        </SpeedDialItems>
    </SfSpeedDial>
</div>

@code{
    SfSpeedDial speeddial;

    public void RefreshPosition()   
    {
        speeddial.RefreshPositionAsync();
    }
}