ngx scrollbar indicator is one of the angular components to add a cursor to a scrollbar that shows the first letter of an item in a large list.
ToDos
- Use semantic-release
- Compatibilities with dates, like a timeline
- Show the custom number of characters in the indicator
- Add an example with Angular Material
- Add more examples with bootstrap
Must Read: jQuery Plugin To Display Scroll Reading Progress Indicator
How to make use of it:
1. Install and import the ngx slider indicator module.
# NPM $ npm install ngx-scrollbar-indicator --save
import { NgxScrollbarIndicatorModule } from 'ngx-scrollbar-indicator';
@NgModule({
...
imports: [
BrowserModule,
...,
NgxScrollbarIndicatorModule
]
})2. Create ngx slider indicator component in your template.
<ngx-scrollbar-indicator #indicatorRef> <!-- Element Here --> </ngx-scrollbar-indicator>
API
Must Read: Bootstrap 5 spinner/loading/pending indicator Form Controls | Input Spinner
| Option | Type | Description |
|---|---|---|
| enable | boolean | Enable or disable the indicator. Default: true |
| changeWhen deprecated | EChangeWhen (top/visible) | When the indicator should change the character? When a character has reached the top of the container or as soon as it becomes visible in the container. Default: EChangeWhen.top |
| containerHeight | number | height of the container, without this, scrolling won’t work. Default: 500 |
| theme | ETheme (circular/waterDrop/squareLike) | The visual theme of the indicator is totally based on scss. Default: ETheme.waterDrop |
| position deprecated | EPosition (auto/top) | Position of indicator, whether to show on top or auto. Default: EPosition.auto |
| showWhen | EShowWhen (always/scroll) | When to show the indicator, always or onscroll/onhover. Default: EShowWhen.scroll |
Properties
Must Read: Animated Stacked Bars Percentage Indicator jQuery Plugin | StackBars
| Name | Type | Description |
|---|---|---|
| all | ScrollbarIndicatorItemDirective[] | All Items Array |
| firsts | { [x: string]: ScrollbarIndicatorItemDirective } | JSON Object with the first item of each character |
| lasts | { [x: string]: ScrollbarIndicatorItemDirective } | JSON Object with the last item of each character |
Methods
Must Read: Pure CSS Single Element Inline Loading Indicators | text-spinners
| Name | Parameters | Returns | Description |
|---|---|---|---|
| showIndicator | – timer, this will help to maintain frequent calls to this function – duration (default 500), after which the indicator will be hidden | Timer, which can be cleared if you are calling this function again within the duration. | Ideally, you shouldn’t call this. This will show the indicator. This will add a ‘show’ class to the indicator. And After duration(default 500), it will remove the same. |
| goToLetter | – letter, Character to which viewport should be scrolled – position (default ‘first’) Element of that character group, first or last | offsetTop of element or -1 if an error | Scroll to a specific letter, positioned first or last. Returns the offsetTop if element found, else -1. Works only in Non-IE Browsers. |
| startCalculation | none | void | Call this only if you are changing options in the run-time. This will calculate arrays and characters, based on options. This is called once after the ngAfterContentInit hook. |
See Also –
Vue Button With Slideout Loading Indicator Library
Notiflix Notification, Popup Boxes, Loading Indicators, and More in JavaScript Library
Illustrator Like Grid Guides & Breakpoint Indicator For Bootstrap
See Demo And Download
Official Website(shhdharmen): Click Here
This superior jQuery/javascript plugin is developed by shhdharmen. For extra Advanced usage, please go to the official website.
