Menu - SlideMenu - 《PrimeNG Document》

Documentation
Source

Slide MenuSlideMenu displays submenus with slide animation.

Documentation

Import


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

MenuModel API

SlideMenu uses the common menumodel api to define its items, visit MenuModel API for details.

Getting Started

SlideMenu requires nested menuitems as its model.


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


export class SlideMenuDemo {
    items: MenuItem[];
    ngOnInit() {
        this.items = [
            {
                label: 'File',
                items: [{
                        label: 'New', 
                        icon: 'pi pi-fw pi-plus',
                        items: [
                            {label: 'Project'},
                            {label: 'Other'},
                        ]
                    },
                    {label: 'Open'},
                    {label: 'Quit'}
                ]
            },
            {
                label: 'Edit',
                icon: 'pi pi-fw pi-pencil',
                items: [
                    {label: 'Delete', icon: 'pi pi-fw pi-trash'},
                    {label: 'Refresh', icon: 'pi pi-fw pi-refresh'}
                ]
            }
        ];
    }
}

SlideMenu is inline by default, popup mode is also supported by enabling popup property and calling toggle method by passing the event from the anchor element.


<p-slideMenu #menu [model]="items" [popup]="true"></p-slideMenu>
<button #btn type="button" pButton icon="fa fa-list" label="Show" (click)="menu.toggle($event)"></button>

Effects

The easing function to use is "ease-out" by default and this can be customized using easing property. See here for possible alternative values.


<p-slideMenu #menu [model]="items" effectDuration="1000" easing="ease-in"></p-slideMenu>

Animation Configuration

Transition of the open and hide animations can be customized using the showTransitionOptions and hideTransitionOptions properties, example below disables the animations altogether.


<p-slideMenu [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'" #menu [model]="items" [popup]="true"></p-slideMenu>
<button #btn type="button" pButton icon="fa fa-list" label="Show" (click)="menu.toggle($event)"></button>

Properties

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.
baseZIndex	number	0	Base zIndex value to use in layering.
autoZIndex	boolean	true	Whether to automatically manage layering.
showTransitionOptions	string	225ms ease-out	Transition options of the show animation.
hideTransitionOptions	string	195ms ease-in	Transition options of the hide animation.

Methods

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.

Styling

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

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

Dependencies

None.

Source

View on GitHub


<h3 class="first">Default</h3>
<p-slideMenu [model]="items" [viewportHeight]="250"></p-slideMenu>
<h3>Popup</h3>
<p-slideMenu #menu [model]="items" [popup]="true" [viewportHeight]="250"></p-slideMenu>
<button #btn type="button" pButton icon="pi pi-bars" label="Show" (click)="menu.toggle($event)"></button>


export class SlideMenuDemo {
    items: MenuItem[];
    ngOnInit() {
        this.items = [
            {
                label: 'File',
                icon: 'pi pi-fw pi-file',
                items: [{
                        label: 'New', 
                        icon: 'pi pi-fw pi-plus',
                        items: [
                            {label: 'Project'},
                            {label: 'Other'},
                        ]
                    },
                    {label: 'Open'},
                    {separator:true},
                    {label: 'Quit'}
                ]
            },
            {
                label: 'Edit',
                icon: 'pi pi-fw pi-pencil',
                items: [
                    {label: 'Delete', icon: 'pi pi-fw pi-trash'},
                    {label: 'Refresh', icon: 'pi pi-fw pi-refresh'}
                ]
            },
            {
                label: 'Help',
                icon: 'pi pi-fw pi-question',
                items: [
                    {
                        label: 'Contents'
                    },
                    {
                        label: 'Search', 
                        icon: 'pi pi-fw pi-search', 
                        items: [
                            {
                                label: 'Text', 
                                items: [
                                    {
                                        label: 'Workspace'
                                    }
                                ]
                            },
                            {
                                label: 'File'
                            }
                    ]}
                ]
            },
            {
                label: 'Actions',
                icon: 'pi pi-fw pi-cog',
                items: [
                    {
                        label: 'Edit',
                        icon: 'pi pi-fw pi-pencil',
                        items: [
                            {label: 'Save', icon: 'pi pi-fw pi-save'},
                            {label: 'Update', icon: 'pi pi-fw pi-save'},
                        ]
                    },
                    {
                        label: 'Other',
                        icon: 'pi pi-fw pi-tags',
                        items: [
                            {label: 'Delete', icon: 'pi pi-fw pi-minus'}
                        ]
                    }
                ]
            },
            {separator:true},
            {
                label: 'Quit', icon: 'pi pi-fw pi-times'
            }
        ];
    }
}

SlideMenu