SplitButtonComponent
Represents the Kendo UI SplitButton component for Angular.
@Component({
selector: 'my-app',
template: `
<kendo-splitbutton [data]="data" icon="paste"
(itemClick)="onSplitButtonItemClick($event)"
(buttonClick)="onSplitButtonClick()">Paste</kendo-splitbutton>
`
})
class AppComponent {
public data: Array<any> = [{
text: 'Keep Text Only',
icon: 'paste-plain-text',
click: () => { console.log('Keep Text Only click handler'); }
}, {
text: 'Paste as HTML',
icon: 'paste-as-html'
}, {
text: 'Paste Markdown',
icon: 'paste-markdown'
}, {
text: 'Set Default Paste'
}];
public onSplitButtonClick(dataItem: any): void {
console.log('Paste');
}
public onSplitButtonItemClick(dataItem: any): void {
if (dataItem) {
console.log(dataItem.text);
}
}
}
Selector
kendo-splitbutton
Export Name
Accessible in templates as #kendoSplitButtonInstance="kendoSplitButton"
Inputs
arrowButtonClass
any
The CSS classes that will be rendered on the button which opens the popup.
Supports the type of values that are supported by ngClass
.
arrowButtonIcon
string
Specifies the name of the font icon that will be rendered for the button which opens the popup.
buttonClass
any
The CSS classes that will be rendered on the main button.
Supports the type of values that are supported by ngClass
.
icon
string
Defines an icon to be rendered next to the button text (see example).
iconClass
string
Defines an icon with a custom CSS class to be rendered next to the button text (see example).
imageUrl
string
Defines the location of an image to be displayed next to the button text (see example).
size
The size property specifies the padding of the SplitButton (see example).
The possible values are:
small
medium
(default)large
none
tabIndex
number
Specifies the tabIndex
of the component.
text
string
Sets the text of the SplitButton.
textField
string
Configures the text field of the button-list popup.
themeColor
The SplitButton allows you to specify predefined theme colors. The theme color will be applied as a background and border color while also amending the text color accordingly (see example).
The possible values are:
base
—Applies coloring based on thebase
theme color. (default)primary
—Applies coloring based on theprimary
theme color.secondary
—Applies coloring based on thesecondary
theme color.tertiary
— Applies coloring based on thetertiary
theme color.info
—Applies coloring based on theinfo
theme color.success
— Applies coloring based on thesuccess
theme color.warning
— Applies coloring based on thewarning
theme color.error
— Applies coloring based on theerror
theme color.dark
— Applies coloring based on thedark
theme color.light
— Applies coloring based on thelight
theme color.inverse
— Applies coloring based on theinverse
theme color.none
— Removes the built in theme color.
type
string
Defines the type attribute of the main button
data
any
Sets the data of the SplitButton.
The data has to be provided in an array-like list.
disabled
boolean
When set to true
, disables a SplitButton item
(see example).
fillMode
The fillMode property specifies the background and border styles of the SplitButton (see example).
The available values are:
solid
(default)flat
outline
link
popupSettings
Configures the popup of the SplitButton.
The available options are:
animate: Boolean
—Controls the popup animation. By default, the open and close animations are enabled.popupClass: String
—Specifies a list of CSS classes that are used to style the popup.appendTo: "root" | "component" | ViewContainerRef
—Specifies the component to which the popup will be appended.align: "left" | "center" | "right"
—Specifies the alignment of the popup.
rounded
The rounded property specifies the border radius of the SplitButton (see example).
The possible values are:
small
medium
(default)large
full
none
Fields
itemTemplate
An item template that helps to customize the item content.
isOpen
boolean
Returns the current open state of the popup.
Events
buttonClick
EventEmitter<any>
Fires each time the user clicks the main button.
@Component({
selector: 'my-app',
template: `
<kendo-splitbutton (buttonClick)="onSplitButtonClick()" [data]="data">
Reply
</kendo-splitbutton>
`
})
class AppComponent {
public data: Array<any> = ['Reply All', 'Forward', 'Reply & Delete'];
public onSplitButtonClick(): void {
console.log('SplitButton click');
}
}
close
EventEmitter<PreventableEvent>
Fires each time the popup is about to close. This event is preventable. If you cancel the event, the popup will remain open.
itemClick
EventEmitter<any>
Fires each time the user clicks on the drop-down list. The event data contains the data item bound to the clicked list item.
@Component({
selector: 'my-app',
template: `
<kendo-splitbutton (itemClick)="onSplitButtonItemClick($event)" [data]="data">
Reply
</kendo-splitbutton>
`
})
class AppComponent {
public data: Array<any> = ['Reply All', 'Forward', 'Reply & Delete'];
public onSplitButtonItemClick(dataItem?: string): void {
if (dataItem) {
console.log(dataItem);
}
}
}
blur
EventEmitter<any>
Fires each time the SplitButton gets blurred.
focus
EventEmitter<any>
Fires each time the SplitButton gets focused.
open
EventEmitter<PreventableEvent>
Fires each time the popup is about to open. This event is preventable. If you cancel the event, the popup will remain closed.
Methods
blur
Blurs the SplitButton component.
focus
Focuses the SplitButton component.
toggle
Toggles the visibility of the popup.
If the toggle
method is used to open or close the popup, the open
and close
events will not be fired.
Parameters
open
boolean
The state of the popup.