		@@ -1,24 +0,60 @@
		# AlphabeticalScrollBar
		# Alphabetical Scroll

		This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.6.
		This [Github](https://github.com/mooalot/alphabetical-scroll-bar) project shows an implementation of the `alphabetical-scroll-bar` in angular using Ionic Framework. Below are images of what it can look like.

		## Code scaffolding
		Not Scrolling \| Scrolling
		:-------------------------:\|:-------------------------:
		<img src="https://github.com/mooalot/alphabetical-scroll-bar/blob/main/src/assets/image2.PNG" width="300"> \| <img src="https://github.com/mooalot/alphabetical-scroll-bar/blob/main/src/assets/image.PNG" width="300">

		Run `ng generate component component-name --project alphabetical-scroll-bar` to generate a new component. You can also use `ng generate directive\|pipe\|service\|class\|guard\|interface\|enum\|module --project alphabetical-scroll-bar`.
		> Note: Don't forget to add `--project alphabetical-scroll-bar` or else it will be added to the default project in your `angular.json` file.

		## Build
		The following is how to use the `alphabetical-scroll-bar`.

		Run `ng build alphabetical-scroll-bar` to build the project. The build artifacts will be stored in the `dist/` directory.
		## Usage

		## Publishing
		Install using npm

		After building your library with `ng build alphabetical-scroll-bar`, go to the dist folder `cd dist/alphabetical-scroll-bar` and run `npm publish`.
		```
		npm i alphabetical-scroll-bar
		```
		Import in your desired `module.ts`

		## Running unit tests
		```
		import { AlphabeticalScrollBarModule } from 'alphabetical-scroll-bar';

		Run `ng test alphabetical-scroll-bar` to execute the unit tests via [Karma](https://karma-runner.github.io).
		@NgModule({
		imports: [
		...
		AlphabeticalScrollBarModule
		],
		...
		})
		```

		## Further help
		Here is the template for how data is passed to and from the component:

		To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
		```
		<app-alphabetical-scroll
		[letterMagnification]="Boolean"
		[exactX]="Boolean"
		[customAlphabet]="Array<string>"
		[validLetters]="Array<string>"
		(letterChange)="EventEmitter<string>"
		(endTouch)="EventEmitter<void>">
		<app-alphabetical-scroll>
		```

		letterMagnification defaults to `true`. This feature will create a magnification effect on the alphabetical scroll bar when the user touches it.

		exactX defaults to `false`. When `false`, this means the user does not have to be accurate along the x direction of the screen (after they have touched the scroll bar), meaning they can slide their finger freely along the x axis while still changing the scroll value. If set to `true`, the user will have to remain inside the scroll bar to continue navigating (I think false gives it a smoother feel).

		customAlphabet allows you to enter your own custom version of the alphabet. It defaults to an all caps alphabet. If the length is not exactly 26 characters, it will default to the all caps alphabet as well.

		validLetters is an array of the possible letters that are available in the scrollable content. For example, if you only have 5 different letter dividers `A`, `D`, `F`, `I`, and `R`, you would want to pass these into `validLetters`. If you did not, when you tap on `Z` in the alphabetical scroll bar, nothing will happen. If you do include `validLetters`, your view would be taken to the next closest letter, which in this case is `R`. This is not a requirement, but it will make your alphabetical scroll bar much more robust.

		letterChange is an eventEmitter. Every time the user scrolls through the alphabetical scroll bar to a new letter, this emitter will output the letter (as a `string`) that the user scrolled to. This will allow you to scroll to the appropriate letter divider. The example project above shows one method of how this function can be used. You can add things like haptics in the function this calls.

		endTouch is an eventEmitter that will emit when the user releases their finger from the scroll bar. This is used to stop any unwanted scroll glitches while the user is using the alphabetical scroll bar. See example for more information.

		You can see how all of these are used in the src/app/home folder.

		*Also note that the `app-alphabetical-scroll` element must have a high z-index to be above dividers and other elements.

alphabetical-scroll-bar - npm Package Compare versions

Improved metrics