import {SplitButtonModule} from 'primeng/primeng';
SplitButton has a default command button and a collection of menuitems to be displayed in an overlay.
<p-splitButton label="Save" icon="fa-check" (onClick)="save()" [model]="items"></p-splitButton>
SplitButton uses the common menumodel api to define its items, visit MenuModel API for details.
Name | Type | Default | Description |
---|---|---|---|
label | string | null | Text of the button. |
icon | string | null | Name of the icon. |
iconPos | string | left | Position of the icon, valid values are "left" and "right". |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
menuStyle | string | null | Inline style of the overlay menu. |
menuStyleClass | string | null | Style class of the overlay menu. |
Name | Parameters | Description |
---|---|---|
onClick | event: browser event |
Callback to invoke when default command button is clicked. |
Following is the list of structural style classes, for theming classes visit theming page. SplitButton uses button and menu components internally, refer to their documentation for the detailed style list.
Name | Element |
---|---|
ui-splitbutton | Container element. |
ui-splitbutton-button | Dropdown button. |
ui-menu | Overlay menu. |
Native component that requires the css of PrimeUI SplitButton.
<p-growl [value]="msgs"></p-growl>
<p-splitButton label="Save" icon="fa-check" (onClick)="save()" [model]="items"></p-splitButton>
export class SplitButtonDemo implements OnInit {
msgs: Message[] = [];
items: MenuItem[];
ngOnInit() {
this.items = [
{label: 'Update', icon: 'fa-refresh', command: () => {
this.update();
}},
{label: 'Delete', icon: 'fa-close', command: () => {
this.delete();
}},
{label: 'Angular.io', icon: 'fa-link', url: 'http://angular.io'},
{label: 'Theming', icon: 'fa-paint-brush', routerLink: ['/theming']}
];
}
save() {
this.msgs = [];
this.msgs.push({severity:'info', summary:'Success', detail:'Data Saved'});
}
update() {
this.msgs = [];
this.msgs.push({severity:'info', summary:'Success', detail:'Data Updated'});
}
delete() {
this.msgs = [];
this.msgs.push({severity:'info', summary:'Success', detail:'Data Deleted'});
}
}
p-tabPanel>