We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Styling of the SpeedDialItem

Hello,

I would like to know how it is possible to change the styling of a Speed Dial Item. For example, the background and foreground colors of the icon and the text.

Thank you in advance!

Best regards,

Ivan



9 Replies

SI Silambarasan I Syncfusion Team November 17, 2022 03:33 AM

Hi Ivan,


Greetings from Syncfusion support.


Yes, it is possible to customize the Speed Dial items by using ‘CssClass’ or ‘ItemTemplate’ properties. Please find the code example and attached demo sample.


 

 

<h5>Customize items using CssClass</h5>

<SfSpeedDial Content="Edit" Position="FabPosition.MiddleCenter" OpenIconCss="speeddial-icons speeddial-icon-edit" CssClass="custom-speeddial">

    <ChildContent>

        <SpeedDialItems>

            <SpeedDialItem Text="Cut" IconCss="speeddial-icons speeddial-icon-cut" />

            <SpeedDialItem Text="Copy" IconCss="speeddial-icons speeddial-icon-copy" />

            <SpeedDialItem Text="Paste" IconCss="speeddial-icons speeddial-icon-paste" />

            <SpeedDialItem Text="Delete" IconCss="speeddial-icons speeddial-icon-delete" />

            <SpeedDialItem Text="Save" IconCss="speeddial-icons speeddial-icon-save" />

        </SpeedDialItems>

    </ChildContent>

</SfSpeedDial>

 

 

<h5>Customize items using ItemTemplate</h5>

<SfSpeedDial Content="Edit" Position="FabPosition.BottomCenter" OpenIconCss="speeddial-icons speeddial-icon-edit">

    <ChildContent>

        <SpeedDialItems>

            <SpeedDialItem Text="Cut" IconCss="speeddial-icons speeddial-icon-cut" />

            <SpeedDialItem Text="Copy" IconCss="speeddial-icons speeddial-icon-copy" />

            <SpeedDialItem Text="Paste" IconCss="speeddial-icons speeddial-icon-paste" />

            <SpeedDialItem Text="Delete" IconCss="speeddial-icons speeddial-icon-delete" />

            <SpeedDialItem Text="Save" IconCss="speeddial-icons speeddial-icon-save" />

        </SpeedDialItems>

    </ChildContent>

    <ItemTemplate>

        <div>

            <span class="custom-speeddial-items @context.IconCss"></span>

            <span class="custom-speeddial-items">@context.Text</span>

        </div>

    </ItemTemplate>

</SfSpeedDial>

 

 

<style>

    /* Using CssClass */

    .custom-speeddial .e-speeddial-li .e-speeddial-li-icon,

    .custom-speeddial .e-speeddial-li .e-speeddial-li-text {

        background-color:#0d6efd;

        color:white;

    }

 

    /* For Template customization */

    .custom-speeddial-items {

        background-color:#0d6efd;

        color:white;

        padding: 5px 12px;

        border-radius: 999999px;

    }

 

    //…

 

</style>

 


Regards,

Silambarasan Ilango


Attachment: BlazorServerApp_6eee7d11.zip


IT Ivan Temelkov November 17, 2022 04:05 AM

Hi,

thank you for your quick reply!

As far as I understand your example, with the ItemTemplate one can customize the aspect of all SpeedDialItems.

What I am trying to achieve is have different styling for the items. For example, render the "Cut" item red, "Paste" item green and so on.

In the ItemTemplate definition context is SpeedDialItem. I guess that with a call to a method that takes SpeedDialItem.ID one can return some custom styling per item, but will it be performat enough?

Any suggestions?

Best regards,

Ivan



SI Silambarasan I Syncfusion Team November 17, 2022 09:19 AM

Hi Ivan,


Thanks for your update.


Yes, you can achieve your requirement using ‘ItemTemplate’ property by customizing based on Speed Dial item ‘ID’ like below code example.


 

<SfSpeedDial Content="Edit" Position="FabPosition.MiddleCenter" OpenIconCss="speeddial-icons speeddial-icon-edit">

    <ChildContent>

        <SpeedDialItems>

            <SpeedDialItem ID="Item1" Text="Cut" IconCss="speeddial-icons speeddial-icon-cut" />

            <SpeedDialItem ID="Item2" Text="Copy" IconCss="speeddial-icons speeddial-icon-copy" />

            <SpeedDialItem ID="Item3" Text="Paste" IconCss="speeddial-icons speeddial-icon-paste" />

            <SpeedDialItem ID="Item4" Text="Delete" IconCss="speeddial-icons speeddial-icon-delete" />

            <SpeedDialItem ID="Item5" Text="Save" IconCss="speeddial-icons speeddial-icon-save" />

        </SpeedDialItems>

    </ChildContent>

    <ItemTemplate>

        <div>

            <span class="custom-speeddial-items @context.IconCss" style="@GetCustomSpeedDialItemStyles(context.ID)"></span>

            <span class="custom-speeddial-items" style="@GetCustomSpeedDialItemStyles(context.ID)">@context.Text</span>

        </div>

    </ItemTemplate>

</SfSpeedDial>

 

@code {

 

    private string GetCustomSpeedDialItemStyles(string item)

    {

        Dictionary<string, string> customSpeedDialStyles = new Dictionary<string, string>();

        customSpeedDialStyles.Add("Item1", "background-color:blue;");

        customSpeedDialStyles.Add("Item2", "background-color:red;");

        customSpeedDialStyles.Add("Item3", "background-color:green;");

        customSpeedDialStyles.Add("Item4", "background-color:yellow;");

        customSpeedDialStyles.Add("Item5", "background-color:brown;");

 

        return customSpeedDialStyles[item];

    }

 

}

 



Regards,

Silambarasan Ilango


Attachment: BlazorServerApp_Modified_dfb32527.zip


SI Silambarasan I Syncfusion Team replied to Ivan Temelkov November 17, 2022 09:49 AM

Hi Ivan,


Please ignore the previous update.


You can achieve your requirement using ‘ItemTemplate’ property by customizing based on Speed Dial item ‘ID’ like below code example.


 

<SfSpeedDial Content="Edit" Position="FabPosition.MiddleCenter" OpenIconCss="speeddial-icons speeddial-icon-edit">

    <ChildContent>

        <SpeedDialItems>

            <SpeedDialItem ID="Item1" Text="Cut" IconCss="speeddial-icons speeddial-icon-cut" />

            <SpeedDialItem ID="Item2" Text="Copy" IconCss="speeddial-icons speeddial-icon-copy" />

            <SpeedDialItem ID="Item3" Text="Paste" IconCss="speeddial-icons speeddial-icon-paste" />

            <SpeedDialItem ID="Item4" Text="Delete" IconCss="speeddial-icons speeddial-icon-delete" />

            <SpeedDialItem ID="Item5" Text="Save" IconCss="speeddial-icons speeddial-icon-save" />

        </SpeedDialItems>

    </ChildContent>

    <ItemTemplate>

        <div>

            @{

                string styleValue = GetCustomSpeedDialItemStyles(context.ID);

            }

            <span class="custom-speeddial-items @context.IconCss" style="@styleValue"></span>

            <span class="custom-speeddial-items" style="@styleValue">@context.Text</span>

        </div>

    </ItemTemplate>

</SfSpeedDial>

 

@code {

 

    private string GetCustomSpeedDialItemStyles(string item)

    {

        Dictionary<string, string> customSpeedDialStyles = new Dictionary<string, string>();

        customSpeedDialStyles.Add("Item1", "background-color:blue;");

        customSpeedDialStyles.Add("Item2", "background-color:red;");

        customSpeedDialStyles.Add("Item3", "background-color:green;");

        customSpeedDialStyles.Add("Item4", "background-color:yellow;");

        customSpeedDialStyles.Add("Item5", "background-color:brown;");

 

        return customSpeedDialStyles[item];

    }

 

}

 


Regards,

Silambarasan Ilango


Attachment: BlazorServerApp_Modified_3b75301.zip


IT Ivan Temelkov November 17, 2022 09:57 AM

Hi,

yes, I already did something similar, but I see it more like a workaround than a real solution since it is not very intuitive.

Still if there is no alternative, I would say that my dictionary is not inside the GetCustomSpeedDialItemStyles method, because it means to create it on every call. I defined the dictionary on a class level.


Best regards,

Ivan






NV Navin Vinayagam Syncfusion Team November 18, 2022 08:59 AM

Hi Ivan,


Currently, we can use templates and CSS to customize the speed dial items as described earlier. You can also achieve your requirement, by defining the color values as a constant and updating the template based on that as you mentioned.

If you have any other suggestions, you can share them with us and we will look into them.


Regards,



IT Ivan Temelkov November 18, 2022 10:31 AM

Hi,

In other occasions you use property ClassCss to define additional styles on an element.

Isn't it possible to Add ClassCss also to the SpeedDialItem?

In alternative, may be, you could use SpeedDialItem<T> and use T as context inside the template to make the templating easier.

I'm not sure if all this makes sense.

Best regards,

Ivan



NV Navin Vinayagam Syncfusion Team November 22, 2022 09:28 AM

Hi Ivan,

Thanks for your suggestions.

We have analyzed your suggestions, the T value is not feasible for SpeedDialItem with the current architecture.

We have considered adding support to add CssClass to SpeedDialItem and planned to provide support to add custom HTML attributes (including CssClass) in our upcoming volume release expected to be released in mid of December 2022.

Feedback Link: https://www.syncfusion.com/feedback/39285/need-to-provide-an-option-to-add-html-attributes-in-speeddial-items

Regards,

Navin V



IT Ivan Temelkov November 22, 2022 09:36 AM

Hi Navin,

Thank you!

I'm looking forward to seeing it in the next version.


Best regards,

Ivan


Loader.
Live Chat Icon For mobile
Up arrow icon