@coderbase/ui

Installation 📦

NPM

npm install --save @coderbase/ui

YARN

yarn add @coderbase/ui --save

Usage

Import CoderbaseUiModule

• Add CoderbaseUiModule in your ***.module.ts:

import {CoderbaseUiModule} from '@coderbase/ui';
 
@NgModule({
    ...
    import: [..., CoderbaseUiModule]
})

• Use it in your HTML elements, for example in your ***.component.html:

<coderbase-ui></coderbase-ui> 

• CoderbaseUi use projection concept for add your own content on header, nav, content and footer part based on attributes names : [ 'header', 'nav', 'content', 'footer' ]

<coderbase-ui>
  <div header> </div>
  <div nav> </div>
  <div content> </div>
  <div footer> </div>
</coderbase-ui> 

• Use CoderbaseUiService in your typescript files

import { CoderbaseUiService } from '@coderbase/ui';
 
 export class AppComponent {
  constructor( private uiService : CoderbaseUiService){
 
    // Observable<boolean> to be update of menu open or close
    // You can subscribe on ts part or 
    // subscribe with pipe async on html part 
    this.open$ = this.uiService.open$
  }
 
 // current status of menu 
  getCurrentMenuStatus(){
    this.uiService.currentMenuStatus();
  }
  
  closeMenu(){
    // close Menu
    this.uiService.closeMenu()
  }
 
  toggle(){
    // Open or Close menu depending of current value
    this.uiService.toggle()
  }
 
  // return currentIcons value
  currentIcons(){
    this.uiService.currentIcons()
  }
 
  // update all icons 
  UpdateIcons(){
    const closeIcon = faAdjust
    const openIcon = faUser
    this.uiService.udpateIcons(closeIcon,openIcon )
  }
 
 
  // update only close icon 
  updateCloseIcon(){
    const closeIcon = faAdjust
    this.uiService.updateCloseIcon(closeIcon)
  }
 
   // update only open icon 
  updateOpenIcon(){
    const closeIcon = faUser
    this.uiService.updateOpenIcon(closeIcon)
  }
 
 
 
  
 
}

• Use open$ in your html with pipe async

<div *ngIf="open$ | async"> Menu Open </div>
<div *ngIf="!(open$ | async)"> Menu Close </div>

Options

Browser Support Tested:

• Chrome
• Firefox
• Safari

Responsive Support Tested:

• Iphone 5+
• Ipad

Made with ❤️ by Pierre et Christophe