Null Pointer Micromanagement

    @greg-md/ng-elevator
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.11 • Public • Published

    Ng Elevator

    npm version Build Status

    Make a container to elevate on the screen while scrolling with Angular.

    Table of Contents:

    Installation

    npm install @greg-md/greg-elevator --save

    How It Works

    Setting up in a module

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
     
    // 1. Import elevator module;
    import { ElevatorModule } from '@greg-md/greg-elevator';
     
    import { AppComponent } from './app.component';
     
    @NgModule({
      imports: [
        BrowserModule,
        // 2. Register elevator module.
        ElevatorModule,
      ],
      declarations: [
        AppComponent,
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

    Using in templates

    import { Component } from '@angular/core';
     
    @Component({
      selector: 'app-root',
      styles: `
        .sidebar {
            width: 200px;
            height: 500px;
        }
      `,
      template: `
        <section class="sidebar">
          <greg-elevator>
            You will see me while scrolling.
          </greg-elevator>
        </section>
      `,
    })
    export class AppComponent { }

    Component Attributes

    marginTop

    Elevator by default is fixed on the top of the screen while scrolling up. You could set a margin top for the elevator.

    Example:

    <greg-elevator [marginTop]="20">
      Hello! I am elevating.
    </greg-elevator>

    marginBottom

    If the elevator height is bigger than the screen height, elevator by default is fixed on the bottom of the screen while scrolling down. You could set a margin bottom for the elevator.

    Example:

    <greg-elevator [marginBottom]="20">
      Hello! I am elevating.
    </greg-elevator>

    License

    MIT © Grigorii Duca

    Huuuge Quote

    I fear not the man who has practiced 10,000 programming languages once, but I fear the man who has practiced one programming language 10,000 times. #horrorsquad

    Install

    npm i @greg-md/ng-elevator

    DownloadsWeekly Downloads

    7

    Version

    1.0.11

    License

    MIT

    Unpacked Size

    185 kB

    Total Files

    27

    Last publish

    Collaborators

    • greg-md