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. SplitButton also requires router to be enabled to support navigation via router.
<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-splitButtonItem icon="fa-link" label="Theming" [url]="['Theming']"></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/array | null | URL as string to navigate, also supports router link dsl. |
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="let 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-splitButtonItem icon="fa-paint-brush" label="Theming" [url]="['Theming']"></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>