New to Kendo UI for Angular? Start a free 30-day trial

ToolBarSplitButtonComponent

Component

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

arrowButtonClass

any

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

arrowButtonIcon

string

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

arrowButtonSvgIcon

SVGIcon

Sets the SVGIcon for the arrow button.

buttonClass

string

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.

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.

popupSettings

PopupSettings

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

showIcon

DisplayMode

Controls the button icon visibility.

Default:

'always'

showText

DisplayMode

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.

Events

buttonClick

EventEmitter<any>

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.

itemClick

EventEmitter<any>

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.