1.0.9 • Published 7 months ago

ngx-menubar v1.0.9

Weekly downloads
-
License
MIT
Repository
github
Last release
7 months ago

Ngx Menubar component

Simple basic menubar with step-into view display menu items(not tree view display).

Open Menubar demo preview.

Installation

  1. Install: npm i ngx-menubar;

  2. 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;
  box-shadow: 1px 2px 8px rgba(0, 0, 0, .45);
}

app.component.html

<div class="container">
  <cyx-menubar #menubar [datasource]="items">
    <!-- some elements can be here if property 'showDocPanel' 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

NameDefault valueDescription
@Input() title: string'Menu'Default Top menu title.
@Input() datasource: IMenuItem[][]Menu items.
@Input() color: string'dark'Theme color, 'dark' or 'light'.
@Input() active: string | numbernullcurrent active menu item id.
@Input() showDocPanel: booleanfalseShow bottom doc panel.
@Input() showMenuIcon: booleantrueShow menu icon.
@Input() iconParser: Function(icon: string) => iconParse icon which from menu item data field IMenuItem#icon.
@Input() searchConfig: SearchConfig{...}Global menu item search configuration.
@Output() itemClick: EventEmitter<IMenuItem>Menu item click event.

Properties

NameDefault valueDescription
selectedItem: IMenuItemnullSelected item.
get isTopMenutrueIs menu top level.

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())
}
1.0.9

7 months ago

1.0.8

7 months ago

1.0.7

7 months ago

1.0.6

1 year ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.2

2 years ago

1.0.3

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago