lib-phule v1.1.3

LibPhule Demo

This library was generated with Angular CLI version 7.2.0.

Preview

How to use?

1. Import library to project.

    import { LibPhuleModule } from 'lib-phule';
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        LibPhuleModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

2. Component and Usage

   Component	Input	Type	Example
   lib-header	menus	Array	{text: 'Home', link: '/'}, {text: 'Dashboard', link: '/dashboard'}, {text: 'Setting', link: '/setting'}
   	actionProfiles	Array	{text: 'Profile', link: '/profile'}, {text: 'Setting', link: '/setting'}, {text: 'Logout', link: '/logout'}
   	avatarLink	String	'https://www.tma.vn/Themes/TMAVN.Theme/Images/TMA-logo1.png'
   	logoLink	String	'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg'
   ib-sidebar	menus	Array	{text: 'Home', link: '/'}, {text: 'Dashboard', link: '/dashboard'}, {text: 'Setting', link: '/setting'}
   lib-login
   lib-footer

3. Example

• In the html component.

    <lib-header [menus]="menus" [actionProfiles]='actionProfiles' [avatarLink]='avatarLink' [logoLink]='logoLink'></lib-header>
    <div>
      <lib-sidebar [menus]="menus"></lib-sidebar>
      <router-outlet></router-outlet>
    </div>
    <lib-footer></lib-footer>

• In the ts file.

    export class DashboardComponent implements OnInit {
      menus = [{text: 'Home', link: '/'}, {text: 'Dashboard', link: '/dashboard'}, {text: 'Setting', link: '/setting'}];
      actionProfiles = [{text: 'Profile', link: '/profile'}, {text: 'Setting', link: '/setting'}, {text: 'Logout', link: '/logout'}];
      logoLink = 'assets/TMA-logo1.png';
      avatarLink = 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg';
  
      constructor() { }
  
      ngOnInit() {
      }
  
    }