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>	An event callback function.

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>	An event callback function.

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>	An event callback function.

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
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`.

IsPrimary

Gets or sets a value that indicates whether to apply the primary style for the SpeedDial component.

Declaration

public bool IsPrimary { get; set; }

Property Value

Type	Description
System.Boolean	`true`, if the primary style is applied for SpeedDial component. The default value is `true`.

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>	An event callback function.

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>	An event callback function.

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>	An event callback function.

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>	An event callback function.

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="#target_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
System.Threading.Tasks.Task

Overrides

SfBaseComponent.OnAfterRenderAsync(Boolean)

OnInitializedAsync()

Declaration

protected override Task OnInitializedAsync()

Returns

Type
System.Threading.Tasks.Task

Overrides

SfBaseComponent.OnInitializedAsync()

OnParametersSetAsync()

Declaration

protected override Task OnParametersSetAsync()

Returns

Type
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.