Разделенная кнопка

PrimeNG/SplitButton (opens in a new tab)

SplitButton имеет кнопку с действием по-умолчанию и список элементов которые отображаются во всплывающем меню.

С чего начать

Подключите модуль

import { SplitButtonModule } from 'primeng/splitbutton';

В .ts файле

import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/api';
import { MessageService } from 'primeng/api';
 
@Component({
  selector: 'app-prime-splitbutton',
  templateUrl: './prime-splitbutton.component.html',
  styleUrls: ['./prime-splitbutton.component.scss'],
  providers: [MessageService],
})
export class PrimeSplitbuttonComponent implements OnInit {
 
  items: MenuItem[] = [];
 
  constructor(private messageService: MessageService) { }
 
  ngOnInit(): void {
    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' },
      { separator: true },
      { 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' });
  }
}

Встройте компонент с помощью тэга p-splitButton.

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

Для отображения всплывающих сообщений разместите в теле страницы следующий код:.

Basic

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

Severities

<p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items"></p-splitButton>
<p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items" styleClass="p-button-secondary p-mb-2"></p-splitButton>
<p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('success')" [model]="items" styleClass="p-button-success p-mb-2"></p-splitButton>
<p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items" styleClass="p-button-info p-mb-2"></p-splitButton>
<p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('warn')" [model]="items" styleClass="p-button-warning p-mb-2"></p-splitButton>
<p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('warn')" [model]="items" styleClass="p-button-help p-mb-2"></p-splitButton>
<p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('error')" [model]="items" styleClass="p-button-danger p-mb-2"></p-splitButton>

Размеры

<p-splitButton
<p-splitButton
label="Save"
icon="pi pi-plus"
(onClick)="save(&aposinfo&apos)"
[model]="items"
styleClass="p-splitbutton-xs"
></p-splitButton>
<p-splitButton
  label="Save"
  icon="pi pi-plus"
  (onClick)="save(&aposinfo&apos)"
  [model]="items"
  styleClass="p-splitbutton-sm"
></p-splitButton>
<p-splitButton label="Save" icon="pi pi-plus" (onClick)="save(&aposinfo&apos)" [model]="items"></p-splitButton>
<p-splitButton label="Save" icon="pi pi-plus" (onClick)="save(&aposinfo&apos)" [model]="items" styleClass="p-splitbutton-lg"></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.
appendTo	any	null	Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
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.
expandAriaLabel	string	null	Defines a string that labels the expand button for accessibility.

События

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

Стилизация

Name	Element
p-splitbutton	Container element.
p-splitbutton-menubutton	Dropdown button.
p-menu	Overlay menu.

SlideMenu Splitter