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
Name | Type | Default | Description |
---|---|---|---|
arrowButtonClass |
| The CSS classes that will be rendered on the button which opens the popup.
Supports the type of values that are supported by | |
arrowButtonIcon |
| Specifies the name of the font icon that will be rendered for the button which opens the popup. | |
buttonClass |
| The CSS classes that will be rendered on the main button.
Supports the type of values that are supported by | |
icon |
| Defines an icon to be rendered next to the button text (see example). | |
iconClass |
| Defines an icon with a custom CSS class to be rendered next to the button text (see example). | |
imageUrl |
| 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:
| |
tabIndex |
| Specifies the | |
text |
| Sets the text of the SplitButton. | |
textField |
| 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:
| |
type |
| Defines the type attribute of the main button | |
data |
| Sets the data of the SplitButton.
| |
disabled |
| When set to | |
fillMode |
| The fillMode property specifies the background and border styles of the SplitButton (see example). The available values are:
| |
popupSettings |
| Configures the popup of the SplitButton. The available options are:
| |
rounded |
| The rounded property specifies the border radius of the SplitButton (see example). The possible values are:
|
Fields
Name | Type | Default | Description |
---|---|---|---|
itemTemplate |
| An item template that helps to customize the item content. | |
isOpen |
| Returns the current open state of the popup. |
Events
Name | Type | Description |
---|---|---|
buttonClick |
| Fires each time the user clicks the main button.
|
close |
| Fires each time the popup is about to close. This event is preventable. If you cancel the event, the popup will remain open. |
itemClick |
| Fires each time the user clicks on the drop-down list. The event data contains the data item bound to the clicked list item.
|
blur |
| Fires each time the SplitButton gets blurred. |
focus |
| Fires each time the SplitButton gets focused. |
open |
| 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 | ||||||
|