import {SlideMenuModule,MenuItem} from 'primeng/primeng';
SlideMenu uses the common menumodel api to define its items, visit MenuModel API for details.
SlideMenu requires nested menuitems as its model.
<p-slideMenu [model]="items"></p-slideMenu>
export class SlideMenuDemo {
private items: MenuItem[];
ngOnInit() {
this.items = [
{
label: 'File',
items: [{
label: 'New',
icon: 'fa-plus',
items: [
{label: 'Project'},
{label: 'Other'},
]
},
{label: 'Open'},
{label: 'Quit'}
]
},
{
label: 'Edit',
icon: 'fa-edit',
items: [
{label: 'Undo', icon: 'fa-mail-forward'},
{label: 'Redo', icon: 'fa-mail-reply'}
]
}
];
}
}
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>
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="1s" easing="ease-in"></p-slideMenu>
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 | 500ms | Duration of the sliding animation in seconds or 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. |
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. |
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. |
None.
<h3 class="first">Default</h3>
<p-slideMenu [model]="items"></p-slideMenu>
<h3>Popup</h3>
<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>
export class SlideMenuDemo {
private items: MenuItem[];
ngOnInit() {
this.items = [
{
label: 'File',
icon: 'fa-file-o',
items: [{
label: 'New',
icon: 'fa-plus',
items: [
{label: 'Project'},
{label: 'Other'},
]
},
{label: 'Open'},
{label: 'Quit'}
]
},
{
label: 'Edit',
icon: 'fa-edit',
items: [
{label: 'Undo', icon: 'fa-mail-forward'},
{label: 'Redo', icon: 'fa-mail-reply'}
]
},
{
label: 'Help',
icon: 'fa-question',
items: [
{
label: 'Contents'
},
{
label: 'Search',
icon: 'fa-search',
items: [
{
label: 'Text',
items: [
{
label: 'Workspace'
}
]
},
{
label: 'File'
}
]}
]
},
{
label: 'Actions',
icon: 'fa-gear',
items: [
{
label: 'Edit',
icon: 'fa-refresh',
items: [
{label: 'Save', icon: 'fa-save'},
{label: 'Update', icon: 'fa-save'},
]
},
{
label: 'Other',
icon: 'fa-phone',
items: [
{label: 'Delete', icon: 'fa-minus'}
]
}
]
},
{
label: 'Quit', icon: 'fa-minus'
}
];
}
}