Overlay - Sidebar - 《PrimeNG Document》

Documentation
Source

SidebarSidebar is a panel component displayed as an overlay.

Documentation

Import


import {SidebarModule} from 'primeng/sidebar';

Getting Started

Sidebar is used as a container and visibility is controlled with visible property.


<p-sidebar [(visible)]="display">
    Content
</p-sidebar>
<button type="text" (click)="display = true" pButton icon="pi pi-plus" label="Show"></button>

Position

Sidebar can either be located as the left (default), right, top or bottom of the screen depending on the position property.


<p-sidebar [(visible)]="display" position="right">
    Content
</p-sidebar>

Size

Sidebar size can be changed using a fixed value or using one of the three predefined ones.


<p-sidebar [(visible)]="display" [style]="{width:'30em'}"></p-sidebar>
<p-sidebar [(visible)]="display" styleClass="ui-sidebar-sm"></p-sidebar>
<p-sidebar [(visible)]="display" styleClass="ui-sidebar-md"></p-sidebar>
<p-sidebar [(visible)]="display" styleClass="ui-sidebar-lg"></p-sidebar>

Full Screen

Full screen mode allows the sidebar to cover whole screen.


<p-sidebar [(visible)]="display" [fullScreen]="true">
Content
</p-sidebar>

Properties

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.
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.

Events

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.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

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

Dependencies

None.

Source

View on GitHub


<p-sidebar [(visible)]="visibleSidebar1" [baseZIndex]="10000">
    <h1 style="font-weight:normal">Left Sidebar</h1>
    <button pButton type="button" (click)="visibleSidebar1 = false" label="Save" class="ui-button-success"></button>
    <button pButton type="button" (click)="visibleSidebar1 = false" label="Cancel" class="ui-button-secondary"></button>
</p-sidebar>
<p-sidebar [(visible)]="visibleSidebar2" position="right" [baseZIndex]="10000">
    <h1 style="font-weight:normal">Right Sidebar</h1>
    <button pButton type="button" (click)="visibleSidebar2 = false" label="Save" class="ui-button-success"></button>
    <button pButton type="button" (click)="visibleSidebar2 = false" label="Cancel" class="ui-button-secondary"></button>
</p-sidebar>
<p-sidebar [(visible)]="visibleSidebar3" position="top" [baseZIndex]="10000">
    <h1 style="font-weight:normal">Top Sidebar</h1>
    <button pButton type="button" (click)="visibleSidebar3 = false" label="Save" class="ui-button-success"></button>
    <button pButton type="button" (click)="visibleSidebar3 = false" label="Cancel" class="ui-button-secondary"></button>
</p-sidebar>
<p-sidebar [(visible)]="visibleSidebar4" position="bottom" [baseZIndex]="10000">
    <h1 style="font-weight:normal">Bottom Sidebar</h1>
    <button pButton type="button" (click)="visibleSidebar4 = false" label="Save" class="ui-button-success"></button>
    <button pButton type="button" (click)="visibleSidebar4 = false" label="Cancel" class="ui-button-secondary"></button>
</p-sidebar>
<p-sidebar [(visible)]="visibleSidebar5" [fullScreen]="true" [baseZIndex]="10000">
    <h1 style="font-weight:normal">Full Screen Sidebar</h1>
    <button pButton type="button" (click)="visibleSidebar5 = false" label="Save" class="ui-button-success"></button>
    <button pButton type="button" (click)="visibleSidebar5 = false" label="Cancel" class="ui-button-secondary"></button>
</p-sidebar>
<button pButton type="button" (click)="visibleSidebar1 = true" icon="pi pi-arrow-right"></button>
<button pButton type="button" (click)="visibleSidebar2 = true" icon="pi pi-arrow-left"></button>
<button pButton type="button" (click)="visibleSidebar3 = true" icon="pi pi-arrow-down"></button>
<button pButton type="button" (click)="visibleSidebar4 = true" icon="pi pi-arrow-up"></button>
<button pButton type="button" (click)="visibleSidebar5 = true" icon="pi pi-th-large"></button>


export class SidebarDemo {
    visibleSidebar1;
    visibleSidebar2;
    visibleSidebar3;
    visibleSidebar4;
    visibleSidebar5;
}