Button - SplitButton - 《PrimeNG Document》

Documentation
Source

SplitButtonSplitButton groups a set of commands in an overlay with a default command.

Documentation

Import


import {SplitButtonModule} from 'primeng/splitbutton';

Getting Started

SplitButton has a default command button and a collection of menuitems to be displayed in an overlay.


<p-splitButton label="Save" icon="pi pi-check" (onClick)="save()" [model]="items"></p-splitButton>

Animation Configuration

Transition of the open and hide animations can be customized using the showTransitionOptions and hideTransitionOptions properties, example below disables the animations altogether.


<p-splitButton [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'" label="Save" icon="pi pi-check" (onClick)="save()" [model]="items"></p-splitButton>

MenuModel API

SplitButton uses the common menumodel api to define its items, visit MenuModel API for details.

Properties

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.
appendTo	any	null	Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element.
disabled	boolean	false	When present, it specifies that the component should be disabled.
tabindex	number	null	Index of the element in tabbing order.
dir	string	null	Indicates the direction of the element.
showTransitionOptions	string	225ms ease-out	Transition options of the show animation.
hideTransitionOptions	string	195ms ease-in	Transition options of the hide animation.

Events

Name	Parameters	Description
onClick	event: browser event	Callback to invoke when default command button is clicked.
onDropdownClick	event: browser event	Callback to invoke when dropdown button is clicked.

Severity

Different color options are available to define severity levels.

.ui-button-secondary
.ui-button-success
.ui-button-info
.ui-button-warning
.ui-button-danger


<p-splitButton label="Save" icon="pi pi-check" [model]="items" styleClass="ui-button-warning"></p-splitButton>

Styling

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.

Dependencies

None.

Source

View on GitHub


<p-toast [style]="{marginTop: '80px'}"></p-toast>
<h3 class="first">Basic</h3>
<p-splitButton label="Save" icon="pi pi-file" (onClick)="save('info')" [model]="items"></p-splitButton>
<h3>Severities</h3>
<p-splitButton label="Save" icon="pi pi-file" (onClick)="save('info')" [model]="items" styleClass="ui-button-secondary"></p-splitButton>
<p-splitButton label="Save" icon="pi pi-file" (onClick)="save('success')" [model]="items" styleClass="ui-button-success"></p-splitButton>
<p-splitButton label="Save" icon="pi pi-file" (onClick)="save('info')" [model]="items" styleClass="ui-button-info"></p-splitButton>
<p-splitButton label="Save" icon="pi pi-file" (onClick)="save('warn')" [model]="items" styleClass="ui-button-warning"></p-splitButton>
<p-splitButton label="Save" icon="pi pi-file" (onClick)="save('error')" [model]="items" styleClass="ui-button-danger"></p-splitButton>
<h3>RTL</h3>
<p-splitButton label="Save" icon="pi pi-file" (onClick)="save('info')" [model]="items" dir="rtl"></p-splitButton>


export class SplitButtonDemo implements OnInit {
    items: MenuItem[];
    constructor(private messageService: MessageService) {}
    ngOnInit() {
        this.items = [
            {label: 'Update', icon: 'pi pi-refresh', command: () => {
                this.update();
            }},
            {label: 'Delete', icon: 'pi pi-times', command: () => {
                this.delete();
            }},
            {label: 'Angular.io', icon: 'pi pi-info', url: 'http://angular.io'},
            {label: 'Setup', icon: 'pi pi-cog', routerLink: ['/setup']}
        ];
    }
    save(severity: string) {
        this.messageService.add({severity:severity, summary:'Success', detail:'Data Saved'});
    }
    update() {
        this.messageService.add({severity:'success', summary:'Success', detail:'Data Updated'});
    }
    delete() {
        this.messageService.add({severity:'success', summary:'Success', detail:'Data Deleted'});
    }
}