sys-sidemenubar
v0.0.7
Published
Downloads
2
Readme
SysSidemenubar
sys-sidemenubar
Angular component for navbar
Requires Angular version 9 or higher!
Requires Bootstrap 4
Usage
Install sys-sidemenubar through npm package manager using the following command:
npm i sys-sidemenubar --save
Add SysSidemenubar into your AppModule class. app.module.ts would look like this:
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import { SysSidemenubarModule } from 'sys-sidemenubar';
@NgModule({
imports: [BrowserModule,SysSidemenubarModule ],
declarations: [AppComponent],
bootstrap: [AppComponent],
}
export class AppModule {
}
Include Bootstrap ,jquery,popper and font-awesome
1.Installing using below cmd ` npm install bootstrap @popperjs/core font-awesome jquery --save` 2.Import in angular.json like below "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "node_modules/font-awesome/css/font-awesome.css" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/@popperjs/core/dist/umd/popper.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ]
Add the tag
<sys-sidemenubar>
in app.component.html<sys-sidemenubar [menuList]="data" [position]="'left'" [icon]="true" [backgroundColor]="'green'" [itemColor]="'white'">
Sample data for menuList input
data=[
{name:'home',submenu:[],path:'/home',iconHtml:"<img src='Picture.png' height='22' width='22'>" }, {name:'dashboard',submenu:[],path:'/dashboard'}, {name:'about',submenu:[ {name:'home',path:'/home',iconHtml:" <i class='fa fa-bar-chart'></i>"}, {name:'about',path:'/about',iconHtml:" <i class='fa fa-table'></i>"}], iconHtml:" <i class='fa fa-fw fa-compass'></i>"} ];
| Input | Type | Default | Option| |--|--|--|--| | menuList| any| []| | | position | string | 'left' | 'left','right' or 'top'| | icon| boolean| true| true or false| | backgroundColor| string | '#cad0d6'| any| | itemColor| string | 'black'| any|