Ngx Menubar component
Simple basic menubar with step-into view display menu items(not tree view display).
This component without size change while state changed, as you can define in your custom parent element as more freedom.
Open Menubar demo preview.
Installation
-
Install:
npm i ngx-menubar
; -
Add to module or standalone component:
import {CyxMenubarComponent} from "ngx-menubar"; @NgModule({ // ... imports: [ // ... CyxMenubarComponent ] })
or
import {CyxMenubarComponent} from "ngx-menubar"; @Component({ // ... imports: [ CyxMenubarComponent ] // ... }) export class AppComponent { }
Example
app.component.css
.container {
width: 350px;
height: 500px;
transition: width .2s ease-out;
box-shadow: 1px 2px 8px rgba(0, 0, 0, .45);
}
.container.close {
width: 50px;
}
app.component.html
<div class="container" [class.close]="!menubar.isExpand">
<cyx-menubar #menubar [datasource]="items">
<!-- some elements can be here if property 'enableDocPanel' set to true. -->
</cyx-menubar>
</div>
app.component.ts
@Component({...})
export class AppComponent {
items: IMenuItem[] = [
{id: 1, title: 'runtime', icon: 'deployed_code', children: []},
{
id: 2, title: 'main', children: [
{id: 5, title: 'app-routing.module.ts', children: []},
{id: 6, title: 'app.module.ts', children: []},
{id: 7, title: 'app.component.ts', children: []}
]
},
//...
]
}
Directives
Name | Default value | Description |
---|---|---|
@Input() title: string | 'Menu' | Default Top menu title. |
@Input() datasource: IMenuItem[] | [] | Menu items. |
@Input() color: string | 'dark' | Theme color, 'dark' or 'light'. |
@Input() minimizable: boolean | true | Enable minimizable or not, if false (expand) will not work. |
@Input() enableDocPanel: boolean | false | Show bottom doc panel. |
@Input() iconParser: Function | (icon: string) => icon | Parse icon which from menu item data field IMenuItem#icon . |
@Input() searchConfig: SearchConfig | {...} | Global menu item search configuration. |
@Output() expand: EventEmitter<boolean> | Menubar display state change event. | |
@Output() itemClick: EventEmitter<IMenuItem> | Menu item click event. |
Properties
Name | Default value | Description |
---|---|---|
selectedItem: IMenuItem | null | Selected item. |
isExpand: boolean | true | Is menubar expanded or not. |
get isTopMenu |
true | Is menu top level. |
get docDisplayClass |
'hide' | Doc panel display class name. |
Appendix
IconParser
Example of parse icon name to icon html.
// menu item data.
// {id: 1, title: '...', icon: 'deployed_code'}
// font icon.
icon => `<span class="material-symbols-sharp">${icon}</span>`
// svg icon.
icon => `<svg viewBox="...">...</svg>`
IMenuItem
Menubar menu item type.
export interface IMenuItem {
id: number | string;
title: string;
icon?: string;
children?: IMenuItem[];
data?: { [key: string]: any }
}
SearchConfig
export interface SearchConfig {
placeHolder?: string;
predicate?: (keyword: string, item: IMenuItem) => boolean;
}
DefaultSearchConfig
{
placeHolder: 'search',
predicate
:
(keyword, item) => item.title.toLowerCase().includes(keyword.toLowerCase())
}