Сайдбар

Боковая панель - это панель, отображаемая в виде наложения по краям экрана.

С чего начать

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

import { SidebarModule } from 'primeng/sidebar';

В .ts файле

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-prime-sidebar',
  templateUrl: './prime-sidebar.component.html',
  styleUrls: ['./prime-sidebar.component.scss']
})
export class PrimeSidebarComponent implements OnInit {
 
  visibleSidebar1: any;
  visibleSidebar2: any;
  visibleSidebar3: any;
  visibleSidebar4: any;
  visibleSidebar5: any;
 
  constructor() { }
 
  ngOnInit(): void {
  }
}

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

Sidebar

Свойства

Name	Type	Default	Description
visible	boolean	false	Specifies the visibility of the dialog.
position	string	left	Specifies the position of the sidebar, valid values are "left", "right", "bottom" and "top".
fullScreen	boolean	false	Adds a close icon to the header to hide the dialog.
appendTo	any	null	Target element to attach the dialog, 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).
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.
blockScroll	boolean	false	Whether to block scrolling of the document when sidebar is active.
baseZIndex	number	0	Base zIndex value to use in layering.
autoZIndex	boolean	true	Whether to automatically manage layering.
modal	boolean	true	Whether an overlay mask is displayed behind the sidebar.
dismissible	boolean	true	Whether to dismiss sidebar on click of the mask.
showCloseIcon	boolean	true	Whether to display the close icon.
transitionOptions	string	150ms cubic-bezier(0, 0, 0.2, 1)	Transition options of the animation.
ariaCloseLabel	string	close	Aria label of the close icon.
closeOnEscape	boolean	true	Specifices if pressing escape key should hide the sidebar.

События

Name	Parameters	Description
onShow	event: Event object	Callback to invoke when dialog is shown.
onHide	event: Event object	Callback to invoke when dialog is hidden.

Шаблоны

Name	Parameters
content	-

Стилизация

Name	Element
p-sidebar	Container element
p-sidebar-left	Container element of left sidebar.
p-sidebar-right	Container element of right sidebar.
p-sidebar-top	Container element of top sidebar.
p-sidebar-bottom	Container element of bottom sidebar.
p-sidebar-full	Container element of a full screen sidebar.
p-sidebar-active	Container element when sidebar is visible.
p-sidebar-close	Close anchor element.
p-sidebar-sm	Small sized sidebar.
p-sidebar-md	Medium sized sidebar.
p-sidebar-lg	Large sized sidebar.
p-sidebar-mask	Modal layer of the sidebar.

SelectButton Skeleton