DEV Community

loading...
Cover image for Angular Sidebar

Angular Sidebar

primetek profile image PrimeTek ・1 min read

Angular Sidebar is a panel component displayed as an overlay at the edges of the screen.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {SidebarModule} from 'primeng/sidebar';
Enter fullscreen mode Exit fullscreen mode

Getting Started

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

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

<p-button type="text" (click)="display = true" icon="pi pi-plus" label="Show"></p-button>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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="p-sidebar-sm"></p-sidebar>
<p-sidebar [(visible)]="display" styleClass="p-sidebar-md"></p-sidebar>
<p-sidebar [(visible)]="display" styleClass="p-sidebar-lg"></p-sidebar>
Enter fullscreen mode Exit fullscreen mode

Full Screen

Full screen mode allows the sidebar to cover whole screen.

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

Theming

Sidebar supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG Sidebar showcase for demos and documentation.

Discussion (0)

pic
Editor guide