Wondering what’s next for npm?Check out our public roadmap! »

    ngx-yazuo-sidenav
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.6 • Public • Published

    NgxYazuoSidenav

    Installation

    npm install --save ngx-yazuo-sidenav

    Usage

    Module:

    Import gxYazuoSidenavModule from ngx-yazuo-sidenav

    import { NgxYazuoSidenavModule } from 'ngx-yazuo-sidenav';
     
    @NgModule({
      imports: [ NgxYazuoSidenavModule.forRoot() ]
    })

    Component

    1. Markup
    <button (click)="showSideNav()">Show Sidenav</button>
     
    <ng-template #content>
       <h1>HELLO WORD!</h1>
    </ng-template>
    1. Component method
    import { Component, TemplateRef, ViewChild } from '@angular/core';
    import { YazuoSidenavSettings, NgxYazuoSidenavService, YazuoSidenavDirection } from 'ngx-yazuo-sidenav';
     
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    export class AppComponent {
      title = 'app';
     
      @ViewChild('content', {static: true}) content: TemplateRef<any>;
     
      constructor(private yazuoSidenav: NgxYazuoSidenavService) {}
     
      settings: YazuoSidenavSettings = {
        bgColor:'#eeeeee', //default: '#eeeeee'
        width: 100, //default: 75
        animationTime: 1, //default: 0.5s
        position: YazuoSidenavDirection.Right, //default: YazuoSidenavDirection.Left
        bgBackDrop: 'rgba(0,0,0,0.2)', //default: rgba(0,0,0,0.2)
        backdrop: false, //default: true,
        clickOutside: false //default: true
        btnClose: false //default: true
      };
     
      showSideNav(): void {
        this.yazuoSidenav.open(this.content, this.settings); //settings is optional
      }
     
      closeSideNav(): void {
        this.yazuoSidenav.close()
      }
    }

    YazuoSidenav options

    export interface YazuoSidenavSettings {
      bgColor?: string//color background sidenav
      animationTime?: number//duration for animation on close
      width?: number//width of sidenav component
      position?: YazuoSidenavDirection//position start sidenav: left ou right
      backdrop?: boolean//show backdrop
      bgBackDrop?: string//color for backdrop
      clickOutside?: boolean//close the sidenav when clicked outside
      btnClose?: boolean//flag for hidden or show close button
    }

    Install

    npm i ngx-yazuo-sidenav

    DownloadsWeekly Downloads

    65

    Version

    1.3.6

    License

    MIT

    Unpacked Size

    78.8 kB

    Total Files

    23

    Last publish

    Collaborators

    • avatar