New to Kendo UI for AngularStart a free 30-day trial

Represents the Kendo UI ToolBar SplitButton for Angular.

Use the ToolBar SplitButton to create a split button with a main button and a drop-down list of actions in the ToolBar.

Definition

Package:@progress/kendo-angular-toolbar

Selector:kendo-toolbar-splitbutton

Export Name:Accessible in templates as #kendoToolBarSplitButtonInstance="kendoToolBarSplitButton"

Syntax:

html
<kendo-toolbar>
     <kendo-toolbar-splitbutton text="Paste" [data]="data">
     </kendo-toolbar-splitbutton>
</kendo-toolbar>

Inputs

Sets the CSS classes for the arrow button that opens the popup. Accepts values supported by ngClass.

Sets the name of the font icon for the arrow button.

Default:

'chevron-down'

Sets the SVGIcon for the arrow button.

Default:

chevronDownIcon

Sets the CSS classes for the main button. Accepts values supported by ngClass.

data

any[]

Sets the data of the SplitButton (see example).

Provide the data as an array-like list.

disabled

boolean

When true, disables a SplitButton item.

fillMode

ButtonFillMode

Sets the fill mode for the button. The fill mode represents the background and border styles. The default value is set by the Kendo theme.

Default:

undefined

icon

string

Sets the icon rendered next to the button text (see example).

iconClass

string

Sets a custom CSS class icon rendered next to the button text.

imageUrl

string

Sets a URL for the image displayed next to the button text.

Configures the popup of the SplitButton. Accepts a PopupSettings object that allows you to customize the popup behavior and appearance.

Controls the button icon visibility.

Default:

'always'

Controls the button text visibility.

Default:

'always'

svgIcon

SVGIcon

Sets the SVGIcon rendered in the main button. Accepts an existing Kendo SVG icon or a custom one.

text

string

Sets the text of the SplitButton (see example).

textField

string

Sets the text field for the button-list popup.

Default:

'text'

themeColor

ButtonThemeColor

Sets the predefined theme color for the button. The theme color applies to the background, border, and text. The default value is set by the Kendo theme.

Default:

undefined

Events

Fires when the user clicks the main button.

close

EventEmitter​<PreventableEvent>

Fires when the popup is about to close. This event is preventable. If you cancel the event, the popup stays open.

Fires when the user clicks a drop-down list item. The event data contains the clicked item's data.

open

EventEmitter​<PreventableEvent>

Fires when the popup is about to open. This event is preventable. If you cancel the event, the popup stays closed.