Search results

Icons

SplitButton Icons

SplitButton can have an icon to provide the visual representation of the action. To place the icon on a SplitButton, set the IconCss property to e-icons with the required icon CSS. By default, the icon is positioned to the left side of the SplitButton. You can customize the icon’s position by using the IconPosition property

The following example illustrates how to place icon in SplitButton component.

@using Syncfusion.EJ2.Blazor.SplitButtons

<EjsSplitButton Items="@Items" IconCss="e-icons e-paste">Paste</EjsSplitButton>
<EjsSplitButton Items="@Items" IconCss="e-icons e-paste" IconPosition="SplitButtonIconPosition.Top">Paste</EjsSplitButton>

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

<style>
    .e-paste::before {
        content: '\e501';
    }
</style>

Output be like

Split Button Sample

The Essential JS 2 provides a set of icons that can be loaded by applying e-icons class name to the element. You can also use third party icons on the SplitButton using the IconCss property.

Vertical Button

Vertical Button in SplitButton can be achieved by adding e-vertical class using CssClass property.

The following example illustrates how to vertical support in SplitButton component.

@using Syncfusion.EJ2.Blazor.SplitButtons

<EjsSplitButton Items="@Items" IconCss="e-icons e-paste" CssClass="e-vertical">Paste</EjsSplitButton>

@code {

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

<style>
    .e-paste::before {
        content: '\e501';
    }
</style>

Output be like

Split Button Sample

Separator

The Separators are the horizontal lines that are used to separate the popup items. You cannot select the separators. You can enable separators to group the popup items using the separator property.

The following example illustrates how to enable Separator support in SplitButton component.

@using Syncfusion.EJ2.Blazor.SplitButtons

<EjsSplitButton Items="@Items" IconCss="e-icons e-paste" CssClass="e-vertical">Paste</EjsSplitButton>

@code {

public List<ItemModel> Items = new List<ItemModel>
{
    new ItemModel{ Text = "Cut" },
    new ItemModel{ Text = "Copy", Separator = true },
    new ItemModel{ Text = "Paste" }
};
}

<style>
    .e-paste::before {
        content: '\e501';
    }
</style>

Output be like

Split Button Sample

See Also