npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ngx-horizontal-scroll-menu

v1.1.0

Published

It also comes with some features such as adding background classes and text classes to quickly style the menu.

Downloads

335

Readme

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