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.
Add Array of items to menu
Select key from object that holds a link
Add styles to Background
Add styles to font
npm install ngx-horizontal-menu-scroll --save
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 {}
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' }
];
}
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 |
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
This project is open for contribution
I would be acknowledging collaborators here when some start coming in.
MIT
Github @isahohieku Twitter @isahohieku