SplitButtonComponent
Represents the Kendo UI SplitButton component for Angular.
Definition
Package:@progress/kendo-angular-buttons
Selector:kendo-splitbutton
Export Name:Accessible in templates as #kendoSplitButtonInstance="kendoSplitButton"
Syntax:
@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');
}
}Inputs
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.
'chevron-down'
arrowButtonSvgIcon
SVGIcon
Specifies the SVGIcon displayed on the button that opens the popup.
chevronDownIcon
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).
Configures the background and border styles of the SplitButton (see example). The default value is set by the Kendo theme.
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).
''
Configures the popup settings of the SplitButton.
Configures the border radius of the SplitButton (see example). The default value is set by the Kendo theme.
Configures the padding of the SplitButton (see example). The default value is set by the Kendo theme.
undefined
svgIcon
SVGIcon
Specifies an SVGIcon to display next to the button text.
text
string
Sets the text displayed within the SplitButton.
''
textField
string
Configures the text field of the button-list popup.
Configures the theme color of the SplitButton. The theme color applies to the background, border, and text (see example). The default value is set by the Kendo theme.
undefined
type
string
Specifies the type attribute of the main button.
'button'
Fields
isOpen
boolean
Returns the current open state of the popup.
Specifies a template to customize the content of the items in the drop-down list.
Events
blur
EventEmitter<any>
Emits an event when the SplitButton is blurred.
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.
focus
EventEmitter<any>
Emits an event when the SplitButton gains focus.
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.
open
EventEmitter<PreventableEvent>
Emits an event before the popup opens. This event is preventable.