Skip to content

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.

License

Notifications You must be signed in to change notification settings

isahohieku/ngx-horizontal-menu-scroll

Repository files navigation

Horizontal Menu Scroll

Known Vulnerabilities npm version HitCount Build Status Coverage Status codebeat badge

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.

  • Customizable icons
  • Icon size
  • Menu items with icon

Contributing

This project is open for contribution

Authors and acknowledgment

I would be acknowledging collaborators here when some start coming in.

License

MIT

Github @isahohieku Twitter @isahohieku

About

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.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published