import {SplitButton} from 'primeng/primeng';
import {SplitButtonItem} from 'primeng/primeng';
SplitButton has a default command button and a collection of p-splitButtonItem components to be displayed in an overlay.
<p-splitButton label="Save" icon="fa-check" (onClick)="save()">
<p-splitButtonItem icon="fa-close" label="Delete" (onClick)="delete()"></p-splitButtonItem>
<p-splitButtonItem icon="fa-refresh" label="Update" (onClick)="update()"></p-splitButtonItem>
<p-splitButtonItem icon="fa-link" label="Angular.io" url="http://angular.io"></p-splitButtonItem>
</p-splitButton>
SplitButtonElement defines an item in the overlay using the following options.
Name | Type | Default | Description |
---|---|---|---|
icon | string | null | Icon of the item. |
label | string | null | Text of the item. |
url | string | null | URL to navigate when item is clicked. |
onClick | function | null | Callback to invoke when the item is clicked. |
SplitButton can also be defined dynamically using *ngFor.
<p-splitButton label="Save" icon="fa-check" (onClick)="save()">
<p-splitButtonItem *ngFor="#item of items" [icon]="item.icon" [label]="item.label"></p-splitButtonItem>
</p-splitButton>
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()">
<p-splitButtonItem icon="fa-close" label="Delete" (onClick)="delete()"></p-splitButtonItem>
<p-splitButtonItem icon="fa-refresh" label="Update" (onClick)="update()"></p-splitButtonItem>
<p-splitButtonItem icon="fa-link" label="Angular.io" url="http://angular.io"></p-splitButtonItem>
</p-splitButton>
export class SplitButtonDemo {
msgs: Message[] = [];
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>