@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:
- CoderbaseUi use projection concept for add your own content on header, nav, content and footer part based on attributes names : [ 'header', 'nav', 'content', 'footer' ]
- 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
Menu Open Menu Close
Options
Browser Support Tested:
- Chrome
- Firefox
- Safari
Responsive Support Tested:
- Iphone 5+
- Ipad
Made with ❤️ by Pierre et Christophe