Have ideas to improve npm?Join in the discussion! »

    @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

    Keywords

    none

    Install

    npm i @coderbase/ui

    DownloadsWeekly Downloads

    29

    Version

    0.0.6

    License

    none

    Unpacked Size

    119 kB

    Total Files

    29

    Last publish

    Collaborators

    • avatar