Search results

Change caret icon

Dropdown arrow can be customized on popup open and close. It can be handled in OnOpen and OnClose event.

In the following example, the up arrow is updated on popup close and down arrow is updated on popup open using OnOpen and OnClose event by adding and removing e-caret-up class.

@using Syncfusion.EJ2.Blazor.SplitButtons

<EjsDropDownButton Items="@Items" CssClass="@IconCss" OnOpen="beforeOpen" OnClose="beforeClose">Clipboard</EjsDropDownButton>

@code {
    public List<ItemModel> Items = new List<ItemModel>
    {
        new ItemModel{ Text = "Edit" },
        new ItemModel{ Text = "Copy" },
        new ItemModel{ Text = "Paste" }
    };

    public string IconCss = "";
    private void beforeOpen(BeforeOpenCloseMenuEventArgs args)
    {
        this.IconCss = "e-caret-up";
        this.StateHasChanged();
    }
    private void beforeClose(BeforeOpenCloseMenuEventArgs args)
    {
        this.IconCss = "";
        this.StateHasChanged();
    }
}

<style>
    .e-caret {
        transform: rotate(0deg);
        transition: transform 200ms ease-in-out;
    }

    .e-caret-up .e-caret {
        transform: rotate(180deg);
    }
</style>

Output be like

Change caret icon