Blazor

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SfSpeedDial

    Show / Hide Table of Contents

    Class SfSpeedDial

    The Blazor SpeedDial component that appears in front of all the contents of the page and displays list of action buttons on click which is an extended version of FAB.

    Inheritance
    System.Object
    SfBaseComponent
    SfSpeedDial
    Inherited Members
    SfBaseComponent.Dispose()
    SfBaseComponent.Dispose(Boolean)
    SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)
    Namespace: Syncfusion.Blazor.Buttons
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class SfSpeedDial : SfBaseComponent
    Remarks

    The button of speed dial is positioned in relative to a view port of browser or Target. It can display a menu of related actions SpeedDialItems or a custom content PopupTemplate.

    Examples

    A simple SpeedDial with action items.

     
    <SfSpeedDial Content="Edit"> 
        <SpeedDialItems>
            <SpeedDialItem Text="Cut"></SpeedDialItem
            <SpeedDialItem Text="Copy"></SpeedDialItem>
            <SpeedDialItem Text="Paste"></SpeedDialItem>
        </SpeedDialItems>
    </SfSpeedDial> 

    A SpeedDial with popup template.

     
     <SfSpeedDial Content="FeedBack"> 
        <PopupTemplate>
            <div class="form-content">
                <h4 style = "text-align:center" > Feedback Form</h4>
                <b>Name</b><br>
                <input placeholder="Enter Name"><br>
                <b>Leave Your Comments</b>
                <textarea placeholder="Enter Your Comments" style="width:100%"></textarea><br>
                <button type="submit">Submit</button>
                <button>Cancel</button>
            </div>
        </PopupTemplate>
    </SfSpeedDial> 

    Constructors

    SfSpeedDial()

    Declaration
    public SfSpeedDial()

    Properties

    Closed

    Gets or sets an event callback that is raised when the SpeedDial popup is closed.

    Declaration
    public EventCallback<SpeedDialOpenCloseEventArgs> Closed { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<SpeedDialOpenCloseEventArgs>

    CloseIconCss

    Gets or sets one or more CSS classes to include an icon or image to denote the speed dial is opened and displaying menu items.

    Declaration
    public string CloseIconCss { get; set; }
    Property Value
    Type Description
    System.String

    Accepts a CSS class string separated by space to include an icon or image for the button. The default value is String.Empty.

    Remarks

    If the CloseIconCss is String.Empty, then the OpenIconCss is used when SpeedDial is open as well.

    Closing

    Gets or sets an event callback that is raised before the speed dial popup is closed.

    Declaration
    public EventCallback<SpeedDialBeforeOpenCloseEventArgs> Closing { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<SpeedDialBeforeOpenCloseEventArgs>
    Remarks

    Closing is a canceable event. To cancel the closing action of SpeedDial Popup, set the Cancel property as true.

    Examples

    SpeedDial with Closing event.

     
    <SfSpeedDial Content="Edit" Closing="closing"> 
       <ChildContent>
        <SpeedDialItems>
            <SpeedDialItem Text="Cut"></SpeedDialItem
            <SpeedDialItem Text="Copy"></SpeedDialItem>
            <SpeedDialItem Text="Paste"></SpeedDialItem>
        </SpeedDialItems>
       </ChildContent>
    </SfSpeedDial> 
    @code {
        private closing(SpeedDialBeforeOpenCloseEventArgs args){
            args.Cancel = false; //Set as true to prevent closing of SpeedDial popup.
        }
    }

    Content

    Gets or sets the content for the button of SpeedDial.

    Declaration
    public string Content { get; set; }
    Property Value
    Type Description
    System.String

    Accepts a string value. The default value is String.Empty.

    Created

    Gets or sets an event callback that is raised when the SfSpeedDial rendering is completed.

    Declaration
    public EventCallback<object> Created { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<System.Object>
    Examples
     
    <SfSpeedDial Content="Edit" Created="created"> 
       <ChildContent>
        <SpeedDialItems>
            <SpeedDialItem Text="Cut"></SpeedDialItem
            <SpeedDialItem Text="Copy"></SpeedDialItem>
            <SpeedDialItem Text="Paste"></SpeedDialItem>
        </SpeedDialItems>
       </ChildContent>
    </SfSpeedDial> 
    @code {
        private created (){
            Console.WriteLine("SpeedDial Created");
        }
    }

    CssClass

    Gets or sets one or more CSS classes to customize the appearance of SpeedDial.

    Declaration
    public string CssClass { get; set; }
    Property Value
    Type Description
    System.String

    Accepts a CSS class string separated by space to customize the appearance of button. The default value is String.Empty.

    Direction

    Gets or sets the value that indicates the speed dial action items (SpeedDialItems) display direction when Mode is Linear.

    Declaration
    public LinearDirection Direction { get; set; }
    Property Value
    Type Description
    LinearDirection

    One of the LinearDirection enumeration that specifies the direction of speed dial items in linear mode. The default value is Auto

    Disabled

    Gets or sets a value that indicates whether to enable or disable the SpeedDial.

    Declaration
    public bool Disabled { get; set; }
    Property Value
    Type Description
    System.Boolean

    true, if the button component is disabled. The default value is false.

    HtmlAttributes

    Gets or sets a collection of additional attributes that will applied to the SpeedDial button element.

    Declaration
    public Dictionary<string, object> HtmlAttributes { get; set; }
    Property Value
    Type Description
    System.Collections.Generic.Dictionary<System.String, System.Object>
    Remarks

    Additional attributes can be added by specifying as inline attributes or by specifying @attributes directive.

    Examples

    In the below code example, button width has been specified as style attribute in SfSpeedDial tag directive.

     
    <SfSpeedDial style="width:200px" Content="Edit" > 
        <SpeedDialItems>
            <SpeedDialItem Text="Cut"></SpeedDialItem
            <SpeedDialItem Text="Copy"></SpeedDialItem>
            <SpeedDialItem Text="Paste"></SpeedDialItem>
        </SpeedDialItems>
    </SfSpeedDial> 

    In the below code example, aria-label (accessibility attribute) has been specified as an attribute in SfSpeedDial tag directive.

     
    <SfSpeedDial aria-label="Edit" OpenIconCss="EditIcon"> 
        <SpeedDialItems>
            <SpeedDialItem Text="Cut"></SpeedDialItem
            <SpeedDialItem Text="Copy"></SpeedDialItem>
            <SpeedDialItem Text="Paste"></SpeedDialItem>
        </SpeedDialItems>
    </SfSpeedDial> 

    IconPosition

    Gets or sets the value that indicates the position of icon in the button of speed dial.

    Declaration
    public IconPosition IconPosition { get; set; }
    Property Value
    Type Description
    IconPosition

    One of the IconPosition enumeration that specifies the position of icon. The default value is Left.

    IsModal

    Gets or sets the value that indicates whether the speeddial popup can be displayed as modal or modal less.

    Declaration
    public bool IsModal { get; set; }
    Property Value
    Type Description
    System.Boolean

    true, if the Speed dial creates an overlay that disables interaction with other elements other than speed dial items. If user clicks anywhere other than speed dial items then popup will get closed. The default value is false.

    ItemClicked

    Gets or sets an event callback that is raised when a speed dial action item is clicked.

    Declaration
    public EventCallback<SpeedDialItemEventArgs> ItemClicked { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<SpeedDialItemEventArgs>
    Examples
     
    <SfSpeedDial Content="Edit" ItemClicked="itemclicked"> 
       <ChildContent>
        <SpeedDialItems>
            <SpeedDialItem Text="Cut"></SpeedDialItem
            <SpeedDialItem Text="Copy"></SpeedDialItem>
            <SpeedDialItem Text="Paste"></SpeedDialItem>
        </SpeedDialItems>
       </ChildContent>
    </SfSpeedDial> 
    @code {
        private itemclicked(SpeedDialItemEventArgs args){
            Console.WriteLine(args.Item.Text + " is SpeedDial Clicked");
        }
    }

    ItemRendered

    Gets or sets an event callback that is raised when a SpeedDialItem is rendered.

    Declaration
    public EventCallback<SpeedDialItemEventArgs> ItemRendered { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<SpeedDialItemEventArgs>

    ItemTemplate

    Gets or sets a template content for the SpeedDialItem. The template content is defined as a child content of ItemTemplate tag directive

    Declaration
    public RenderFragment<SpeedDialItem> ItemTemplate { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.RenderFragment<SpeedDialItem>

    The template content. The default value is null.

    Remarks

    The ItemTemplate used to define custom template for speed dial item. Use the template’s context parameter to access SpeedDialItem properties.

    Examples

    SpeedDial with item template.

     
    <SfSpeedDial Content="Edit"> 
       <ChildContent>
        <SpeedDialItems>
            <SpeedDialItem Text="Cut"></SpeedDialItem
            <SpeedDialItem Text="Copy"></SpeedDialItem>
            <SpeedDialItem Text="Paste"></SpeedDialItem>
        </SpeedDialItems>
       </ChildContent>
       <ItemTemplate>
            <div style = "border: 1px solid lightgreen; background-color:white;" >
                <span>@context.Text</span>
            </div>
       </ItemTemplate> 
    </SfSpeedDial> 

    Mode

    Gets or sets the value that indicates the display mode (linear and radial mode) of speed dial action items.

    Declaration
    public SpeedDialMode Mode { get; set; }
    Property Value
    Type Description
    SpeedDialMode

    One of the SpeedDialMode enumeration that specifies how the speed dial items are displayed. The default value is Linear

    Opened

    Gets or sets an event callback that is raised when the SpeedDial popup is opened.

    Declaration
    public EventCallback<SpeedDialOpenCloseEventArgs> Opened { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<SpeedDialOpenCloseEventArgs>

    OpenIconCss

    Gets or sets one or more CSS classes to include an icon or image for the button of SpeedDial when it's closed.

    Declaration
    public string OpenIconCss { get; set; }
    Property Value
    Type Description
    System.String

    Accepts a CSS class string separated by space to include an icon or image for the SpeedDial. The default value is String.Empty.

    Opening

    Gets or sets an event callback that is raised before the speed dial popup is opened.

    Declaration
    public EventCallback<SpeedDialBeforeOpenCloseEventArgs> Opening { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<SpeedDialBeforeOpenCloseEventArgs>
    Remarks

    Opening is a canceable event. To cancel the opening action of SpeedDial Popup , set the Cancel property as true.

    Examples

    SpeedDial with Opening event.

     
    <SfSpeedDial Content="Edit" Opening="opening"> 
       <ChildContent>
        <SpeedDialItems>
            <SpeedDialItem Text="Cut"></SpeedDialItem
            <SpeedDialItem Text="Copy"></SpeedDialItem>
            <SpeedDialItem Text="Paste"></SpeedDialItem>
        </SpeedDialItems>
       </ChildContent>
    </SfSpeedDial> 
    @code {
        private opening(SpeedDialBeforeOpenCloseEventArgs args){
            args.Cancel = false; //Set as true to prevent opening of SpeedDial popup.
        }
    }

    OpensOnHover

    Gets or sets a value that indicates whether to open the popup when the button of SpeedDial is hovered. By default, SpeedDial opens popup on click action.

    Declaration
    public bool OpensOnHover { get; set; }
    Property Value
    Type Description
    System.Boolean

    true, if the SpeedDial opens popup on mouse hover action. The default value is false.

    PopupTemplate

    Gets or sets a template content for popup of SpeedDial. The template content is defined as a child content of PopupTemplate tag directive

    Declaration
    public RenderFragment PopupTemplate { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.RenderFragment

    The template content. The default value is null.

    Examples

    SpeedDial with popup template.

     
     <SfSpeedDial Content="FeedBack"> 
        <PopupTemplate>
            <div class="form-content">
                <h4 style = "text-align:center" > Feedback Form</h4>
                <b>Name</b><br>
                <input placeholder="Enter Name"><br>
                <b>Leave Your Comments</b>
                <textarea placeholder="Enter Your Comments" style="width:100%"></textarea><br>
                <button type="submit">Submit</button>
                <button>Cancel</button>
            </div>
        </PopupTemplate>
    </SfSpeedDial> 

    Position

    Gets or sets the value that indicates the position of the button of Speed Dial relative to Target.

    Declaration
    public FabPosition Position { get; set; }
    Property Value
    Type Description
    FabPosition

    One of the FabPosition enumeration that specifies the position of SpeedDial. The default value is BottomRight.

    Remarks

    To refresh the position of button of speed dial on Target resized, use RefreshPositionAsync() method. The position will be refreshed automatically when browser resized.

    Target

    Gets or sets the selector that points to the element in which the button of SpeedDial will be positioned.

    Declaration
    public string Target { get; set; }
    Property Value
    Type Description
    System.String

    The default value is null where button is positioned based on viewport of browser.

    Remarks

    The target element must have relative position, else Button will get positioned based on the closest element which has relative position.

    Examples

    Simple SpeedDial with target.

    <div id="target_element" style="position:relative;"></div>
    <SfSpeedDial Content="Edit" Target="#arget_element"> 
        <SpeedDialItems>
            <SpeedDialItem Text="Cut"></SpeedDialItem
            <SpeedDialItem Text="Copy"></SpeedDialItem>
            <SpeedDialItem Text="Paste"></SpeedDialItem>
        </SpeedDialItems>
    </SfSpeedDial> 

    Visible

    Gets or sets a value that indicates whether the SpeedDial is visible or hidden.

    Declaration
    public bool Visible { get; set; }
    Property Value
    Type Description
    System.Boolean

    true, if the SpeedDial is visible. The default value is true.

    Remarks

    Supports two-way binding.

    Methods

    BuildRenderTree(RenderTreeBuilder)

    Declaration
    protected override void BuildRenderTree(RenderTreeBuilder __builder)
    Parameters
    Type Name Description
    Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder

    HideAsync()

    Closes the SpeedDial popup.

    Declaration
    public Task HideAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task

    A task representing the asynchronous operation.

    OnAfterRenderAsync(Boolean)

    Declaration
    protected override Task OnAfterRenderAsync(bool firstRender)
    Parameters
    Type Name Description
    System.Boolean firstRender
    Returns
    Type Description
    System.Threading.Tasks.Task
    Overrides
    SfBaseComponent.OnAfterRenderAsync(Boolean)

    OnInitializedAsync()

    Declaration
    protected override Task OnInitializedAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task
    Overrides
    SfBaseComponent.OnInitializedAsync()

    OnParametersSetAsync()

    Declaration
    protected override Task OnParametersSetAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task

    RefreshPositionAsync()

    Refreshes the button position of speed dial. You can call this method to re-position button when Target is resized.

    Declaration
    public Task RefreshPositionAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task

    A task representing the asynchronous operation.

    ShowAsync()

    Opens the SpeedDial popup to display SpeedDialItems or PopupTemplate.

    Declaration
    public Task ShowAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task

    A task representing the asynchronous operation.

    See Also

    SpeedDialAnimationSettings
    SpeedDialItems
    SpeedDialRadialSettings
    Back to top Generated by DocFX
    Copyright © 2001 - 2023 Syncfusion Inc. All Rights Reserved