Ngx-horizontal-scroll-menu NPM

Horizontal Menu Scroll

Descripiton

This library was built to help save development time and thinking of how to implement a scroll menu. It also comes with some features such as adding background classes and text classes to quickly style the menu.

Example

Stackblitz

Features

Add Array of items to menu
Select key from object that holds a link
Add styles to Background
Add styles to font

Installation

npm install ngx-horizontal-menu-scroll --save

Setup

    import { CommonModule } from '@angular/common';
    import { HorizontalScrollMenuModule } from 'ngx-horizontal-scroll-menu'; // Import module 
    
    @NgModule({
    imports: [
        CommonModule,
        HorizontalScrollMenuModule // Add HorizontalScrollMenuModule to imports
    ],
    declarations: [AppComponent]
    bootstrap: [AppComponent],
    });

    export class AppModule {}

Usage

    import { Component } from '@angular/core';

    @Component({
    selector: 'app-root',
    template: '<ngx-horizontal-menu-scroll [items]="items" [linkLabel]="link"></ngx-horizontal-menu-scroll>',
    })
    export class AppComponent {
        link = 'link';
        items: any[] = [
            { title: 'Orangies', link: 'https://www.github.com/isahohieku' },
            { title: 'Apple', link: 'https://www.github.com/isahohieku' },
            { title: 'Mango', link: 'https://www.github.com/isahohieku' },
            { title: 'Carrot', link: 'https://www.github.com/isahohieku' }
        ];
    }

Options

Option	Type	Default	Descripiton
items	array	An array of programatically generated data	This is expected to be an array of items to be displayed on the Scroll
linkLabel	string	No default	This is expected to be a property in the items array which lets the Scroll know the property that contains the link of an item displayed on the Scroll
background	string	No default	This is expected to be a class name for adding background styles to the wrapper of the Scroll
text	string	No default	This is expected to be a class name for adding text styles to the items of the Scroll
distance	number	50	This is expected to be a number and its to increase/decrease the scroll distance items of the Scroll
leftIcon	string	A base64 image url of a left arrow	This is expected to be a string and its default size is 24 px. you can add a string of the path to your left arrow here. There is no provision for right arrow as we flip the image horizontally to denote the right arrow
hideNav	boolean	false	This is expected to be a boolean true/false to hide/show the nav icons
scrollSpeed	number	100	This is expected to be a number and its the speed of the scroll on mousedown in milliseconds

RoadMap

I'm looking forward to getting the scroll silkier than it is at the moment. For now this are features I look forward to adding. You can request features as well and we look into making it available in later versions.