Positions in Blazor Speed Dial

14 Aug 20263 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 FabPosition 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 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 SpeedDial 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();
    }
}