NgOnePager

This Angular library provides 2 components and that allows you to build views with a 1 pager UI. Each pages takes 100vh and 100vw. The scrollbar is hidden. The user can then scroll between pages by using either the mousewheel or the provided controls.

Installation

run npm install @poseclop/ng-page-scroller

Dependencies

This module requires @angular/material

Limitations

The package does not include gestures recognition. You can set them up manually in your app by installing HammerJS and binding PosPageScroller methods to gestures.

Usage

Import NgOnePagerModule in your application

@ngModule({
    ...
    imports: [
        ...,
        NgOnePagerModule,
    ]
})

Consume the components in your HTML.

<pos-page-container>
    <pos-page>
        <h1>My First Page</h1>
        <main>...</main>
    </pos-page>
    <pos-page>
        <h1>My Second Page</h1>
        <main>...</main>
    </pos-page>
</pos-page-container>

Since the module exports directives, best practice is to export it from a shared module to consume in your application

API

PosPageScrollerComponent

Properties Name | Description ---- | ----------- @Input() pageIndex: number | Index of the selected page @Input() scrollSensivity: number | A number from 1 to 10 that indicates the sensivity to mouse wheel (default 5) @Input() colorIdle: The color of the scrollbar controls buttons and markers in idle mode @Input() colorActive: The color of the selected page marker pageQueryList: QueryList | A query list of all PosPageComponents included in PosPageScroller scrollBarWidth: number | The width in pixels of the scrollBar for current window

Methods Name | Description ---- | ----------- next(): void | Scroll to the next page previous(): void | Scroll the previous page scrollToPage(index: number): void | Scroll to the specified page

Events Name | Description ---- | ----------- pageChange: TPageEvent | Emitted when navigatting to to a new page

PosPageComponent

Name | Description ---- | ----------- elementRef: ElementRef | the elementRef of the PosPage Component

Todo List

• [ ] Add possibility to toggle controls on/off.
• [ ] Add possibility to customize controls
• [x] Reset mouseWheel progress on a timer