SplitButtonComponent

Represents the Kendo UI SplitButton component for Angular.

ts

@Component({
selector: 'my-app',
template: `
 <kendo-splitbutton [data]="items" (buttonClick)="onSplitButtonClick()">Paste</kendo-splitbutton>
`
})

class AppComponent {
  public items: Array<any> = [{
      text: 'Keep Text Only',
      icon: 'clipboard-text',
      click: () => { console.log('Keep Text Only click handler'); }
  }, {
      text: 'Paste as HTML',
      icon: 'clipboard-code'
    }
 ];

  public onSplitButtonClick(dataItem: any): void {
      console.log('Paste');
  }
}

Selector

kendo-splitbutton

Export Name

Accessible in templates as #kendoSplitButtonInstance="kendoSplitButton"

Inputs

Name	Type	Default	Description
arrowButtonClass	any		Specifies the CSS classes for the button that opens the popup. Supports values compatible with ngClass.
arrowButtonIcon	string		Specifies the name of the font icon displayed on the button that opens the popup.
arrowButtonSvgIcon	SVGIcon		Specifies the SVGIcon displayed on the button that opens the popup.
buttonAttributes	{[key: string]: string}		Sets attributes for the main button.
buttonClass	any		The CSS classes applied to the main button. Supports the same values as ngClass.
data	any		Sets the data for the SplitButton. Provide the data as an array-like list.
disabled	boolean		Disables the SplitButton when set to true (see example).
fillMode	ButtonFillMode	'solid'	Configures the background and border styles of the SplitButton (see example).
icon	string		Specifies an icon to display next to the button text (see example).
iconClass	string		Specifies a custom CSS class for the icon displayed next to the button text (see example).
imageUrl	string		Specifies the URL of an image to display next to the button text (see example).
popupSettings	PopupSettings		Configures the popup settings of the SplitButton.
rounded	ButtonRounded	'medium'	Configures the border radius of the SplitButton (see example).
size	ButtonSize	'medium'	Configures the padding of the SplitButton (see example).
svgIcon	SVGIcon		Specifies an SVGIcon to display next to the button text.
tabIndex	number		Specifies the tabindex of the component.
text	string		Sets the text displayed within the SplitButton.
textField	string		Configures the text field of the button-list popup.
themeColor	ButtonThemeColor	'base'	Configures the theme color of the SplitButton. The theme color applies to the background, border, and text (see example).
type	string		Specifies the type attribute of the main button.

Fields

Name	Type	Default	Description
isOpen	boolean		Returns the current open state of the popup.
itemTemplate	ButtonItemTemplateDirective		Specifies a template to customize the content of the items in the drop-down list.

Events

Name	Type	Description
buttonClick	EventEmitter<any>	Emits an event when the main button is clicked.
close	EventEmitter<PreventableEvent>	Emits an event before the popup closes. This event is preventable.
itemClick	EventEmitter<any>	Emits an event when an item in the drop-down list is clicked. The event data contains the clicked item's data.
blur	EventEmitter<any>	Emits an event when the SplitButton is blurred.
focus	EventEmitter<any>	Emits an event when the SplitButton gains focus.
open	EventEmitter<PreventableEvent>	Emits an event before the popup opens. This event is preventable.

Methods

blur
Blurs the SplitButton component.

focus
Focuses the SplitButton component.

toggle
Toggles the visibility of the popup. If the toggle method is used, the open and close events are not fired.
Parameters open boolean The desired state of the popup.