Positions in Blazor Speed Dial

27 Aug 20263 minutes to read

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

The available FabPosition values for the Blazor Speed Dial 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 Blazor Speed Dial 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 Blazor Speed Dial action items programmatically using the ShowAsync and HideAsync methods. These are asynchronous methods and must be awaited in an async context.

The following example demonstrates opening and closing the 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{
    private SfSpeedDial speeddial;

    private async Task Show()
    {
        await speeddial.ShowAsync();
    }

    private async Task Hide()
    {
        await speeddial.HideAsync();
    }
}

Programmatically refresh the position

Refresh the position of the Blazor Speed Dial using the RefreshPositionAsync method when the Target position changes (for example, after a window resize or layout change). This asynchronous method must 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{
    private SfSpeedDial speeddial;

    private async Task RefreshPosition()
    {
        await speeddial.RefreshPositionAsync();
    }
}