ng-kzsidenav
TypeScript icon, indicating that this package has built-in type declarations

0.0.9 • Public • Published

ng-kzsidenav

An Angular sidenav component

Installation

npm install --save ng-kzsidenav

Usage

Import KZSidenavModule into your App module:

...
import { KZSidenavModule } from 'ng-kzsidenav';
 
@NgModule({
    ...
    imports[
      ...,
      KZSidenavModule
    ],
      ...
})
class AppModule {}

Add ng-kzsidenav.css into your angular.json

...
"styles"[
            "node_modules/ng-kzsidenav/ng-kzsidenav.css",
            ...
],
...

In your component's html, simply use <kzsidenav> wrapper and place your sidenav content within it. Your page content should be placed within a div having id kzmain. Inorder to use functions of sidenav like toggeling the open/close functionality add a reference to kzsidenav inside <kzsidenav>.

@Component({
  selector: 'app',
  template: `
        <style>
        /* CSS For Demo Purpose */
            .kzsidenav a {
                padding: 8px 8px 8px 32px;
                text-decoration: none;
                font-size: 25px;
                color: #818181;
                display: block;
                transition: 0.3s;
            }
            .kzsidenav a:hover {
                color: #f1f1f1;
            }
            .kzsidenav .closebtn {
                position: absolute;
                top: 0;
                right: 25px;
                font-size: 36px;
                margin-left: 50px;
            }
        </style> 
        <kzsidenav #kzsidenav="kzsidenav">
        <!-- This code is for demo purpose. You can create your sidenav here after removing <a> tags -->
            <a href="javascript:void(0)" class="closebtn" (click)="kzsidenav.close()">&times;</a>
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Clients</a>
            <a href="#">Contact</a>
        </kzsidenav>
        <div id="kzmain">
        <!-- This code is for demo purpose. You can put your main content here after removing the content inside <div id="kzmain">  -->
            <span (click)="kzsidenav.open()">open</span>
            <div style="text-align:center;">
                <h1> Welcome to App!</h1>
                <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
            </div>
            <h2>Here are some links to help you start: </h2>
            <ul>
                <li>
                    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
                </li>
                <li>
                    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
                </li>
                <li>
                    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
                </li>
            </ul>
        </div>
  `
})

Functions

The kzsidenav has a few public functions:

Function Description
open() Opens the sidenav.
close() Closes the sidenav.
toggle() toggles the sidenav.
currentState() Returns the current state of sidenav.

Options

Inputs

The kzsidenav has a few input properties:

Property name Type Default Description
mode overlay, push, push-with-opacity, full push See the "Modes" section.
position left, right left What side the sidenav should be docked to.
state open,close open At what state the sidenav should be initialized when the page loads.
openSize number 250px Specify open width of sidenav with valid css dimension.
closeSize number 0 Specify close width of sidenav with valid css dimension.
hoverAnimation Whether to animate the sidenav on mouse enter and mouse leave when sidenav is closed.

Modes

overlay

The side navigation slides in over the page content.

push

This is the default mode. The page content is pushed to make space for the side navigation.

push-with-opacity

The page content is pushed to make space for the side navigation with black background and opacity to highlight side navigation.

full

The side navigation slides and covers the whole page (100% width):

Package Sidebar

Install

npm i ng-kzsidenav

Weekly Downloads

2

Version

0.0.9

License

MIT

Unpacked Size

179 kB

Total Files

25

Last publish

Collaborators

  • kumailabbas