@coderbase/ui
TypeScript icon, indicating that this package has built-in type declarations

0.0.6 • Public • Published

@coderbase/ui

NPM

npm Downloads

Open Source Love

TypeScript

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

Readme

Keywords

none

Package Sidebar

Install

npm i @coderbase/ui

Weekly Downloads

3

Version

0.0.6

License

none

Unpacked Size

119 kB

Total Files

29

Last publish

Collaborators

  • coderbase