Styling of the SpeedDialItem

[Ivan Temelkov]

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

[Silambarasan I]

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

[Ivan Temelkov]

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

[Silambarasan I]

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

[Silambarasan I]

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

[Ivan Temelkov]

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

[Navin Vinayagam]

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,

[Ivan Temelkov]

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

[Navin Vinayagam]

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

[Ivan Temelkov]

Hi Navin,

Thank you!

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

Best regards,

Ivan

[Navin Vinayagam]

Hello Ivan,

We are glad to announce that our Essential Studio 2022 Volume 4 release v20.4.0.38 is rolled out and is available for download under the following link.

https://www.syncfusion.com/forums/179561/essential-studio-2022-volume-4-main-release-v20-4-0-38-is-available-for-download

Could you upgrade the Syncfusion packages to the latest version to use the new HTML attribute support in the speed dial item for customization as below?

<SfSpeedDial Content="Edit" OpenIconCss="speeddial-icons speeddial-icon-edit">

    <ChildContent>

        <SpeedDialItems>

            @for (var i = 0; i < items.Count(); i++)

            {

                <SpeedDialItem Text=@items[i].Name IconCss=@items[i].IconCSS style=@("--color:"+items[i].Color+";")/>

            }

        </SpeedDialItems>

    </ChildContent>

</SfSpeedDial>

 

@code {

 

    private List<SampleItems> items = new List<SampleItems>(){

        new SampleItems(){Name="Cut",IconCSS="speeddial-icons speeddial-icon-cut", Color="aqua"},

        .................

        new SampleItems(){Name="Save",IconCSS="speeddial-icons speeddial-icon-save", Color="brown"}

    };

 

    public class SampleItems{

        public string Name {get;set;}

        public string IconCSS { get; set; }

        public string Color { get; set; }

    }

 

}

 

 

<style>

    .e-speeddial-li-text,

   .e-speeddial-li-icon{

        background-color: var(--color) !important;

    }

……

</style>

 

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

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Best Regards,

Navin V

Attachment: BlazorServerApp_ceae81d4.zip

[Ivan Temelkov]

Hi Navin,

thank you for your reply!

I see that you added a "style" property (lowercase "s" really?) and inject the preferred background color there.

You can see that this quickly becomes unmanageable if one should change also color, font properties etc.

In the meantime, I opted for another solution that uses something that can be called "a poor man's SpeedDialItem" that gives me the possibility to introduce a real ItemTemplate.

In the code behind I have a Dictionary of my items (the missing generic parameter T) indexed by their ID.

Something like:

public Dictionary SpeedDialItems { get; set; } = new();

Then in my blazor page I have:

       <SfSpeedDial Target="#home-page"

                 Mode="SpeedDialMode.Linear"

                 Position="FabPosition.BottomRight"

                 OpenIconCss="e-icons e-more-vertical-3"

                 ItemClicked="SpeedDialClicked">

        <ChildContent>

            <SpeedDialItems>

                @foreach (var id in SpeedDialItems.Keys)

                {

                    <SpeedDialItem ID="@id" />

                }

            </SpeedDialItems>

        </ChildContent>

        <ItemTemplate>

            @{

                var workflow = SpeedDialItems[context.ID];

            }

            <MyComponent Item="@workflow" />

        </ItemTemplate>

    </SfSpeedDial>

So in the ItemTemplate I can use a component that accepts T as a parameter and I have access to all its properties that I use for creating and the styling of the list item.

Best regards,

Ivan

[Navin Vinayagam]

Hello Ivan,

We are glad to hear that you are able to achieve your requirement.

Regarding the usage of lowercase "s" for style attributes, I used "camelCase" to differentiate custom HTML attributes from the actual properties of the component. 

However, we can define the attribute style attributes in "PascalCase" also.

Regards,

Navin V