Popup Items and Item Templates
The SplitButton provides options for setting the behavior of its popup and popup items.
The component enables you to:
Popup Items
To control the visibility of the popup items, use the toggle method. To configure the behavior of the popup, use the animate and popupClass settings.
@Component({
selector: 'my-app',
template: `
<div class="example-wrapper">
<kendo-splitbutton [data]="data" [popupSettings]="{popupClass: popupClass, animate: true}">
Reply
</kendo-splitbutton>
</div>
`
})
class AppComponent {
public animate: false;
public popupClass: string = 'font-arial';
public data: Array<any> = [{
text: 'Reply All'
}, {
text: 'Forward'
}, {
text: 'Reply & Delete'
}];
}Item Templates
The SplitButton allows you to define templates for the items it displays in the popup.
@Component({
selector: 'my-app',
template: `
<kendo-splitbutton [data]="data">
Save
<ng-template kendoSplitButtonItemTemplate let-dataItem>
<em>{{ dataItem.text }}</em>
</ng-template>
</kendo-splitbutton>
`
})
class AppComponent {
public data: Array<any> = [{
text: 'Save as'
}, {
text: 'Upload to drive'
}];
}