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.
The SplitButton component is part of Telerik UI for Blazor, a
professional grade UI library with 95+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Creating Blazor SplitButton
- Add a
<TelerikSplitButton>
tag. - Define the primary action in a child
<SplitButtonContent>
tag. Its content can be plain text, HTML or even another component. - Set the
OnClick
parameter of the<TelerikSplitButton>
tag. This will be the event handler for the primary action. - Add a child
<SplitButtonItems>
tag. Insert some<SplitButtonItem>
tags inside it. - Each
<SplitButtonItem>
tag should have some content and anOnClick
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. |
Popup Settings
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";
}
}