Class SfSplitButton

SplitButton component has primary and secondary button. Primary button is used to select
default action and secondary button is used to toggle contextual overlays for displaying list of
action items. It can contain both text and images.

Inheritance

System.Object

SfBaseComponent

SfSplitButton

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

SfBaseComponent.ValidateLicense()

Namespace: Syncfusion.Blazor.SplitButtons

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfSplitButton : SfBaseComponent

Remarks

The component can be customized with text, images, or both, providing a flexible and intuitive user interface.

Examples

In the below code example, a basic SplitButton component initialized with DropDownMenuItems and DropDownMenuItem tag directives.

 
<SfSplitButton> 
   <DropDownMenuItems> 
      <DropDownMenuItem Text="Dashboard"></DropDownMenuItem> 
      <DropDownMenuItem Text="Notifications"></DropDownMenuItem> 
      <DropDownMenuItem Text="User Settings"></DropDownMenuItem> 
      <DropDownMenuItem Text="Log Out"></DropDownMenuItem> 
   </DropDownMenuItems> 
</SfSplitButton> 

In this example, a SfSplitButton is configured with several DropDownMenuItem options.

<SfSplitButton Content="Paste">
    <SplitButtonItems>
        <SplitButtonItem Text="Paste" />
        <SplitButtonItem Text="Paste Special" />
        <SplitButtonItem Text="Paste as Formula" />
        <SplitButtonItem Text="Paste as Hyperlink" />
    </SplitButtonItems>
</SfSplitButton>

In this example, a SfSplitButton is configured with a list of items. When the user clicks the primary button, the default action is triggered. Clicking the dropdown arrow reveals additional options.

<SfSplitButton Content="Save">
    <DropDownMenuItems>
        <DropDownMenuItem Text="Save as..." />
        <DropDownMenuItem Text="Save and close" />
    </DropDownMenuItems>
</SfSplitButton>

Constructors

SfSplitButton()

Declaration

public SfSplitButton()

Properties

ChildContent

Gets or sets the child content for the primary button, which can include HTML elements.

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A Microsoft.AspNetCore.Components.RenderFragment representing the content of the primary button. The default value is null.

Remarks

If this property is not specified, the primary button's content is rendered using the Content property. You can use this to include complex HTML structures within the button.

Examples

This example demonstrates how to use ChildContent to add an icon and text to the button.

<SfSplitButton>
    <ChildContent>
        <span class="e-icons e-save"></span> Save
    </ChildContent>
    <DropDownMenuItems>
        <DropDownMenuItem Text="Save as..." />
    </DropDownMenuItems>
</SfSplitButton>

Content

Gets or sets the text content of the primary button in the SfSplitButton.

Declaration

public string Content { get; set; }

Property Value

Type	Description
System.String	A string that represents the text displayed on the primary button. The default value is string.Empty.

Remarks

Use this property to set a simple text label for the button. For more complex content, such as HTML elements, use the ChildContent property instead.

Examples

This example sets the primary button's text to "Update".

<SfSplitButton Content="Update">
    <DropDownMenuItems>
        <DropDownMenuItem Text="Item 1" />
    </DropDownMenuItems>
</SfSplitButton>

CssClass

Gets or sets a CSS class string to customize the appearance of the SfSplitButton.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	A string representing one or more CSS classes to be applied to the component. The default value is string.Empty.

Remarks

You can use this property to apply custom styles to the button, allowing for greater control over its look and feel.

Examples

This example applies a custom CSS class to the SfSplitButton.

<SfSplitButton CssClass="custom-split-button" Content="Settings">
    <DropDownMenuItems>
        <DropDownMenuItem Text="Item 1" />
    </DropDownMenuItems>
</SfSplitButton>
<style>
.custom-split-button {
background-color: #007bff;
color: white;
}
</style>

Disabled

Gets or sets a value indicating whether the SfSplitButton is disabled.

Declaration

public bool Disabled { get; set; }

Property Value

Type	Description
System.Boolean	true if the button is disabled; otherwise, false. The default value is false.

Remarks

When set to true, the button becomes non-interactive and visually indicates its disabled state.

Examples

This example shows a disabled SfSplitButton.

<SfSplitButton Disabled="true" Content="Disabled">
    <DropDownMenuItems>
        <DropDownMenuItem Text="Item 1" />
    </DropDownMenuItems>
</SfSplitButton>

EnableRtl

Gets or sets a value indicating whether right-to-left (RTL) rendering is enabled for the SfSplitButton.

Declaration

public bool EnableRtl { get; set; }

Property Value

Type	Description
System.Boolean	true if RTL is enabled; otherwise, false. The default value is false.

Remarks

When this property is enabled, the component's layout and text direction are adjusted to support right-to-left languages.

Examples

This example enables RTL mode for the SfSplitButton.

<SfSplitButton EnableRtl="true" Content="RTL Button">
    <DropDownMenuItems>
        <DropDownMenuItem Text="Item 1" />
    </DropDownMenuItems>
</SfSplitButton>

HtmlAttributes

Gets or sets a collection of additional attributes, such as id or title, that will be applied to the container element of the SfSplitButton.

Declaration

public Dictionary<string, object> HtmlAttributes { get; set; }

Property Value

Type	Description
System.Collections.Generic.Dictionary<System.String, System.Object>	A System.Collections.Generic.Dictionary<, > where the key is a string representing the attribute name and the value is the attribute's value. The default is an empty dictionary.

Remarks

You can add custom attributes by specifying them as inline attributes or by using the @attributes directive. These attributes are then applied to the root element of the component.

Examples

In the below code example, the SfSplitButton's width is set using the style attribute.

<SfSplitButton style="width:200px">
   <DropDownMenuItems>
      <DropDownMenuItem Text="Dashboard"></DropDownMenuItem>
      <DropDownMenuItem Text="Notifications"></DropDownMenuItem>
      <DropDownMenuItem Text="User Settings"></DropDownMenuItem>
      <DropDownMenuItem Text="Log Out"></DropDownMenuItem>
   </DropDownMenuItems>
</SfSplitButton>

IconCss

Gets or sets a CSS class string to include an icon or image in the SfSplitButton.

Declaration

public string IconCss { get; set; }

Property Value

Type	Description
System.String	A string representing one or more CSS classes for the icon. The default value is string.Empty.

Remarks

This property is typically used to apply a class from an icon library (e.g., Font Awesome, Material Icons) to display an icon on the button.

Examples

This example adds a save icon to the SfSplitButton.

<SfSplitButton IconCss="e-icons e-save" Content="Save">
    <DropDownMenuItems>
        <DropDownMenuItem Text="Item 1" />
    </DropDownMenuItems>
</SfSplitButton>

IconPosition

Gets or sets a value that indicates how icons are positioned within the SfSplitButton.

Declaration

public SplitButtonIconPosition IconPosition { get; set; }

Property Value

Type	Description
SplitButtonIconPosition	One of the SplitButtonIconPosition enumeration members. The default value is Left.

Remarks

This property determines the position of the icon relative to the button's text content. If the IconPosition is Left, the icon is placed to the left of the content. If the IconPosition is Top, the icon is placed above the content.

Examples

This example positions the icon to the right of the button text.

<SfSplitButton IconCss="e-icons e-arrow-right" Content="Continue" IconPosition="SplitButtonIconPosition.Right">
    <DropDownMenuItems>
        <DropDownMenuItem Text="Item 1" />
    </DropDownMenuItems>
</SfSplitButton>

Items

Gets or sets the collection of action items that will be rendered as the dropdown menu of the SfSplitButton.

Declaration

public List<DropDownMenuItem> Items { get; set; }

Property Value

Type	Description
System.Collections.Generic.List<DropDownMenuItem>	A collection of DropDownMenuItem objects. The default value is null.

Remarks

Use this property to define the items in the dropdown menu. If this property is not specified, you can populate the menu using the DropDownMenuItems and DropDownMenuItem tag directives.

Examples

This example populates the dropdown menu from a list of DropDownMenuItem objects.

<SfSplitButton Content="File">
    <DropDownMenuItems Items="@MenuItems" />
</SfSplitButton>
@code {
public List<DropDownMenuItem> MenuItems = new List<DropDownMenuItem>
{
new DropDownMenuItem { Text = "Open" },
new DropDownMenuItem { Text = "Save" },
new DropDownMenuItem { Text = "Exit" }
};
}

PopupContent

Gets or sets a custom template for the content that appears in the popup of the SfSplitButton.

Declaration

public RenderFragment PopupContent { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A Microsoft.AspNetCore.Components.RenderFragment that defines the custom content for the popup. The default value is null.

Remarks

If the Items property and the DropDownMenuItems tag directive are not specified, the dropdown is populated using this property. This allows for complex and highly customized popup content.

Examples

In the below code example, a SfSplitButton component is rendered with a SfListView<TValue> component as PopupContent.

<SfSplitButton CssClass="e-caret-hide" IconCss="e-icons e-down">
<PopupContent>
<SfListView ID="listview" DataSource="@Data" ShowCheckBox="true">
<ListViewFieldSettings Text="Text" TValue="ListData"></ListViewFieldSettings>
</SfListView>
</PopupContent>
</SfSplitButton>
@code {
public List<ListData> Data = new List<ListData>{
new ListData{ Class = "data", Text = "Print", Id = "data1" },
new ListData{ Class = "data", Text = "Save As", Id = "data2" },
new ListData{ Class = "data", Text = "Update Folder", Id = "data3" },
new ListData{ Class = "data", Text = "Reply", Id = "data4" }
};
public class ListData {
public string Text { get; set; }
public string Id { get; set; }
public string Class { get; set; }
}
}

Methods

AddItems(List<DropDownMenuItem>, String, Boolean)

Adds one or more DropDownMenuItems to the Split Button's dropdown list.

Declaration

public void AddItems(List<DropDownMenuItem> items, string text = null, bool isUniqueId = false)

Parameters

Type	Name	Description
System.Collections.Generic.List<DropDownMenuItem>	items	A System.Collections.Generic.List<> of DropDownMenuItem objects to add to the dropdown menu.
System.String	text	The text of an existing item in the dropdown. If specified, the new items are inserted before this item. If null or not found, the new items are appended to the end of the list.
System.Boolean	isUniqueId	Set to true to treat the text parameter as the unique ID of an item, rather than its display text.

Remarks

This method programmatically updates the dropdown items at runtime. If isUniqueId is true, the method will search for an item based on its Id property.

Examples

The following code example demonstrates how to add new items to the SfSplitButton.

<SfSplitButton @ref="SplitButton" Content="Save">
    <DropDownMenuItems>
        <DropDownMenuItem Text="Save as..." />
    </DropDownMenuItems>
</SfSplitButton>
@code {
    private SfSplitButton SplitButton;
    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            List<DropDownMenuItem> newItems = new List<DropDownMenuItem>
            {
                new DropDownMenuItem { Text = "Save and Close" },
                new DropDownMenuItem { Text = "Save and New" }
            };
            SplitButton.AddItems(newItems);
        }
    }
}

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

OnAfterRenderAsync(Boolean)

Asynchronously performs actions after the SfSplitButton component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender	A System.Boolean value that indicates whether the component is being rendered for the first time.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Overrides

SfBaseComponent.OnAfterRenderAsync(Boolean)

Remarks

If it is the first render and the Created event has subscribers, this method invokes the event.

OnInitializedAsync()

Asynchronously initializes the SfSplitButton component.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Overrides

SfBaseComponent.OnInitializedAsync()

Remarks

This method sets up the initial state of the component, including RTL direction, CSS classes, and HTML attributes.

OnParametersSetAsync()

Asynchronously handles parameter value changes for the SfSplitButton component.

Declaration

protected override Task OnParametersSetAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method is called when component parameters are updated. It ensures that properties such as EnableRtl, CssClass, and HTML attributes are synchronized with the new values.

RemoveItems(List<String>, Boolean)

Removes one or more items from the Split Button's dropdown list based on their text or unique ID.

Declaration

public void RemoveItems(List<string> items, bool isUniqueId = false)

Parameters

Type	Name	Description
System.Collections.Generic.List<System.String>	items	A System.Collections.Generic.List<> of strings, where each string is the text or unique ID of an item to be removed.
System.Boolean	isUniqueId	Set to true to treat the values in the items list as unique IDs. Otherwise, they are treated as display text.

Remarks

This method allows for the dynamic removal of items from the dropdown list. When isUniqueId is true, items are matched based on their Id property.

Examples

The following code example demonstrates how to remove items from the SfSplitButton.

<SfSplitButton @ref="SplitButton" Content="File">
    <DropDownMenuItems>
        <DropDownMenuItem Text="Open" />
        <DropDownMenuItem Text="Save" />
        <DropDownMenuItem Text="Delete" />
    </DropDownMenuItems>
</SfSplitButton>
<button @onclick="RemoveItem">Remove Item</button>
@code {
    private SfSplitButton SplitButton;
    private void RemoveItem()
    {
        SplitButton.RemoveItems(new List<string> { "Delete" });
    }
}

Toggle()

Programmatically opens or closes the Split Button's dropdown list.

Declaration

public void Toggle()

Remarks

This method toggles the visibility of the dropdown popup. If the dropdown is open, it will be closed; if it is closed, it will be opened. This provides the same functionality as a user clicking the dropdown arrow.

Examples

The following code example demonstrates how to toggle the dropdown programmatically.

<SfSplitButton @ref="SplitButton" Content="Tools">
    <DropDownMenuItems>
        <DropDownMenuItem Text="Run" />
        <DropDownMenuItem Text="Debug" />
    </DropDownMenuItems>
</SfSplitButton>
<button @onclick="ToggleDropdown">Toggle Dropdown</button>
@code {
    private SfSplitButton SplitButton;
    private void ToggleDropdown()
    {
        SplitButton.Toggle();
    }
}