Слайд Меню

Slide Menu отображает подменю с анимацией слайдов.

С чего начать

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

import { SlideMenuModule } from 'primeng/slidemenu';
import { MenuItem } from 'primeng/api';

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

<p-slideMenu [model]="items"></p-slideMenu>

Basic

<p-slideMenu [model]="items" [viewportHeight]="220"></p-slideMenu>

Popup

import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/api';
 
@Component({
  selector: 'app-prime-slidemenu',
  templateUrl: './prime-slidemenu.component.html',
  styleUrls: ['./prime-slidemenu.component.scss'],
})
export class PrimeSlidemenuComponent implements OnInit {
  constructor() {}
 
  items: MenuItem[] = [];
 
  ngOnInit(): void {
    this.items = [
      {
        label: 'File',
        icon: 'pi pi-fw pi-file',
        items: [
          {
            label: 'New',
            icon: 'pi pi-fw pi-plus',
            items: [
              {
                label: 'Bookmark',
                icon: 'pi pi-fw pi-bookmark',
              },
              {
                label: 'Video',
                icon: 'pi pi-fw pi-video',
              },
            ],
          },
          {
            label: 'Delete',
            icon: 'pi pi-fw pi-trash',
          },
          {
            separator: true,
          },
          {
            label: 'Export',
            icon: 'pi pi-fw pi-external-link',
          },
        ],
      },
      {
        label: 'Edit',
        icon: 'pi pi-fw pi-pencil',
        items: [
          {
            label: 'Left',
            icon: 'pi pi-fw pi-align-left',
          },
          {
            label: 'Right',
            icon: 'pi pi-fw pi-align-right',
          },
          {
            label: 'Center',
            icon: 'pi pi-fw pi-align-center',
          },
          {
            label: 'Justify',
            icon: 'pi pi-fw pi-align-justify',
          },
        ],
      },
      {
        label: 'Users',
        icon: 'pi pi-fw pi-user',
        items: [
          {
            label: 'New',
            icon: 'pi pi-fw pi-user-plus',
          },
          {
            label: 'Delete',
            icon: 'pi pi-fw pi-user-minus',
          },
          {
            label: 'Search',
            icon: 'pi pi-fw pi-users',
            items: [
              {
                label: 'Filter',
                icon: 'pi pi-fw pi-filter',
                items: [
                  {
                    label: 'Print',
                    icon: 'pi pi-fw pi-print',
                  },
                ],
              },
              {
                icon: 'pi pi-fw pi-bars',
                label: 'List',
              },
            ],
          },
        ],
      },
      {
        label: 'Events',
        icon: 'pi pi-fw pi-calendar',
        items: [
          {
            label: 'Edit',
            icon: 'pi pi-fw pi-pencil',
            items: [
              {
                label: 'Save',
                icon: 'pi pi-fw pi-calendar-plus',
              },
              {
                label: 'Delete',
                icon: 'pi pi-fw pi-calendar-minus',
              },
            ],
          },
          {
            label: 'Archieve',
            icon: 'pi pi-fw pi-calendar-times',
            items: [
              {
                label: 'Remove',
                icon: 'pi pi-fw pi-calendar-minus',
              },
            ],
          },
        ],
      },
      {
        separator: true,
      },
      {
        label: 'Quit',
        icon: 'pi pi-fw pi-power-off',
      },
    ];
  }
}

Свойства

Name	Type	Default	Description
model	array	null	An array of menuitems.
popup	boolean	false	Defines if menu would displayed as a popup.
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.
easing	string	ease-out	Easing animation to use for sliding.
effectDuration	any	250	Duration of the sliding animation in milliseconds.
backLabel	string	Back	Label of element to navigate back.
menuWidth	number	180	Width of the submenus.
viewportHeight	number	175	Height of the scrollable area, a scrollbar appears if a menu height is longer than this value.
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).
baseZIndex	number	0	Base zIndex value to use in layering.
autoZIndex	boolean	true	Whether to automatically manage layering.
showTransitionOptions	string	.12s cubic-bezier(0, 0, 0.2, 1)	Transition options of the show animation.
hideTransitionOptions	string	.1s linear	Transition options of the hide animation.

Методы

Name	Parameters	Description
toggle	event: browser event	Toggles the visibility of the popup menu.
show	event: browser event	Displays the popup menu.
hide	-	Hides the popup menu.

Стилизация

Name	Element
p-slidemenu	Container element.
p-slidemenu-wrapper	Wrapper of content.
p-slidemenu-content	Content element.
p-slidemenu-backward	Element to navigate to previous menu on click.
p-menu-list	List element.
p-menuitem	Menuitem element.
p-menuitem-text	Label of a menuitem.
p-menuitem-icon	Icon of a menuitem.
p-submenu-icon	Arrow icon of a submenu.

Slider Splitbutton