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 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
- 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
OnClickparameter 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 anOnClickhandler.
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";
}
}