Blazor SplitButton Overview

The SplitButton for Blazor is a combination of a button and a dropdown. It provides a collection of related user actions in a compact interface. The SplitButton has one primary clickable action, which is always visible, and a list of secondary actions that are displayed in a dropdown when the user clicks on the arrow.

Telerik UI for Blazor Ninja image

The SplitButton component is part of Telerik UI for Blazor, a professional grade UI library with 100 native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Creating Blazor SplitButton

  1. Add a <TelerikSplitButton> tag.
  2. Define the primary action in a child <SplitButtonContent> tag. Its content can be plain text, HTML or even another component.
  3. Set the OnClick parameter of the <TelerikSplitButton> tag. This will be the event handler for the primary action.
  4. Add a child <SplitButtonItems> tag. Insert some <SplitButtonItem> tags inside it.
  5. Each <SplitButtonItem> tag should have some content and an OnClick handler.

Basic SplitButton

<TelerikSplitButton OnClick="@OnReply">
    <SplitButtonContent>Reply</SplitButtonContent>
    <SplitButtonItems>
        <SplitButtonItem OnClick="@OnReplyAll">Reply All</SplitButtonItem>
        <SplitButtonItem OnClick="@OnForward">Forward</SplitButtonItem>
    </SplitButtonItems>
</TelerikSplitButton>

Last action: <strong> @LastAction </strong>

@code {
    string LastAction { get; set; }

    void OnReply()
    {
        LastAction = "Reply";
    }

    void OnReplyAll()
    {
        LastAction = "Reply All";
    }

    void OnForward()
    {
        LastAction = "Forward";
    }
}

Icons

The primary SplitButton action and each secondary item in the dropdown can display a font icon or an image for better looks and user experience.

Apperance

The SplitButton provides a variety of settings to control its visual appearance, for example the colors, borders, shape and size. This spares the need to use custom CSS code.

Events

Each SplitButton action fires a separate OnClick event, so that the application can react to user behavior.

SplitButton Parameters

The following table lists the SplitButton parameters, except those related to built-in styling and icons. Also check the SplitButton API Reference for a full list of properties, methods and events.

Parameter Type and Default Value Description
AriaLabel string Sets the aria-label attribute of the primary action element, which is <button class="k-button">.
Class string Renders a custom CSS class to the main component element, which is <div class="k-split-button">. Use it to override the theme styles to obtain a specific appearance, if none of the SplitButton appearance settings can achieve this.
Enabled bool
(true)
Enables or disables the component.
Id string Sets the id attribute of the primary action element (<button>).
TabIndex int Sets the tabindex attribute of the primary action element.
Title string Sets the title attribute of the primary action element.

The SplitButton exposes configuration settings for its dropdown (popup). The parameters should be set in a <SplitButtonPopupSettings> tag, which should be placed inside a <SplitButtonSettings> tag like this:

<TelerikSplitButton>
    <SplitButtonSettings>
        <SplitButtonPopupSettings Height="150px" />
    </SplitButtonSettings>
</TelerikSplitButton>
Parameter Type and Default Value Description
AnimationDuration int
(300)
Sets the dropdown animation duration in milliseconds.
Class string Renders a custom CSS class to the dropdown container, which is <div class="k-animation-container">.
Height string
("auto")
The dropdown height. If the items cannot fit, a vertical scrollbar will appear. If not set, the dropdown will expand, based on the number of items.
MaxHeight string The maximum dropdown height, if an explicit height is not set.
MinHeight string The minimum dropdown height, if an explicit height is not set.
Width string The dropdown width. If not set, the dropdown will expand, based on the length of its items.
MaxWidth string The maximum dropdown width, if an explicit width is not set. If there is a longer item, a horizontal scrollbar will show.
MinWidth string The minimum dropdown width, if an explicit width is not set.

As in standard CSS, the min and max settings take precedence over width and height.

Item Settings

The following table lists the SplitButtonItem parameters, except those related to icons.

Parameter Type and Default Value Description
Class string Renders a custom CSS class to the dropdown item's element, which is <li class="k-item k-menu-item">.
Enabled bool
(true)
Enables or disables the item.

SplitButton Reference and Methods

The SplitButton exposes a FocusAsync method to focus it programmatically. To use it, define a reference to the component instance with the @ref attribute. Be aware of the Blazor life cycle if you want to focus the component on page load.

Get a reference to the SplitButton and execute methods

<TelerikSplitButton @ref="@SplitButtonRef" OnClick="@OnReply">
    <SplitButtonContent>Reply</SplitButtonContent>
    <SplitButtonItems>
        <SplitButtonItem OnClick="@OnReplyAll">Reply All</SplitButtonItem>
    </SplitButtonItems>
</TelerikSplitButton>

<TelerikButton OnClick="@FocusSplitButton">Focus SplitButton</TelerikButton>

Last action clicked: <strong> @LastActionClicked </strong>

@code {
    TelerikSplitButton SplitButtonRef { get; set; }

    string LastActionClicked { get; set; }

    async Task FocusSplitButton()
    {
        await SplitButtonRef.FocusAsync();
    }

    void OnReply()
    {
        LastActionClicked = "Reply";
    }

    void OnReplyAll()
    {
        LastActionClicked = "Reply All";
    }
}

Next Steps

See Also

In this article