greg-md / ng-elevator

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

Ng Elevator

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

Table of Contents:

• Installation
• How It Works
• Component Attributes
• License
• Huuuge Quote

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