diff --git a/README.md b/README.md index c0e5536..e8df204 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@

- +

@@ -16,4 +16,99 @@ [![Verify and Deploy to npmjs](https://github.com/ProAngular/ngx-scroll-top/actions/workflows/on-merge-main-deploy-npmjs.yml/badge.svg)](https://github.com/ProAngular/ngx-scroll-top/actions/workflows/on-merge-main-deploy-npmjs.yml) # Description + Configurable, lightweight back to top button for Angular projects. + +# Compatibility + +| Angular version | @proangular/ngx-scroll-top | Install | +| --------------- | -------------------------- | ------------------------------------------ | +| v14 | v1.x.x | `ng add @proangular/ngx-scroll-top@latest` | +| v13 | v1.x.x | `ng add @proangular/ngx-scroll-top@latest` | +| v12 | v1.x.x | `ng add @proangular/ngx-scroll-top@latest` | + +# Demo + +

+ +

+ +# Usage + +Install package +```bash +npm install @proangular/ngx-scroll-top --save +``` + +Import package +```diff +... ++ import { NgxScrollTopModule } from '@proangular/ngx-scroll-top'; +... + +@NgModule({ + imports: [ + ... ++ NgxScrollTopModule + ], + ... +}) +export class AppModule { } +``` + +Use package +```html + +``` + +# Component API + +| Input | Value Typing | Default Value | Description | +| ---------------------- | --------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | +| **backgroundColor** | string | `'#1775d1'` (blue) | Background color of the back to top button (hex string). | +| **bottomOffset** | string \| number | `'0px'` | Offset `px` from bottom of page when scrolled to bottom. For example this can be used to make sure the back to top button never overlaps a footer. | +| **displayAtYPosition** | string \| number | `'420px'` | The back to top button will not be displayed until the user scrolls to the provided Y (vertical `px`) coordinate on the page. | +| **position** | `'left'` \| `'right'` | `'right'` | Position on-screen where the back to top button is displayed. | +| **styleHeight** | string | `'25px'` | Height of back to top button in string px format. | +| **styleWidth** | string | `'25px'` | Width of back to top button in string px format. | +| **styleZIndex** | number | `999` | Style the `z-index` for the back to top button as needed for correct layer height adjustment. This can be useful when working with sticky headers. | + +# Example(s) + +```html + + ↑ + +``` + +# Development + +1. Pull, create new branch, add changes. +2. Bump version of package in `package.json` and `package-lock.json`, commit all changes, push. +3. Submit code in published PR for review and approval. +4. Allow CI actions to completely run and verify files. + +Thank you for your contributions! + +# Donation + +As a husband and father of four children, your donations mean the world to me! Any donations are greatly appreciated and keep me going! + +[https://www.paypal.me/CodyTolene](https://www.paypal.me/CodyTolene) +[https://github.com/sponsors/ProAngular](https://github.com/sponsors/ProAngular) + +# License + +Copyright © 2022 [Cody Tolene](https://www.CodyTolene.com) + +All contents are licensed under the [MIT license]. + +[mit license]: LICENSE diff --git a/package-lock.json b/package-lock.json index 66c0893..58adf9a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@proangular/ngx-scroll-top", - "version": "1.1.2", + "version": "1.1.3", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/package.json b/package.json index d67ac83..b764dcd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@proangular/ngx-scroll-top", - "version": "1.1.2", + "version": "1.1.3", "description": "Configurable, lightweight back to top button for Angular projects.", "author": "Pro Angular ", "homepage": "https://www.proangular.com", diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 43bd795..acf081c 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -5,7 +5,7 @@ import { Component } from '@angular/core'; template: `
-

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimssy veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip expir diff --git a/src/assets/images/demo-scroll-top.gif b/src/assets/images/demo-scroll-top.gif new file mode 100644 index 0000000..99fa846 Binary files /dev/null and b/src/assets/images/demo-scroll-top.gif differ diff --git a/src/assets/pro-angular-logo.png b/src/assets/images/pro-angular-logo.png similarity index 100% rename from src/assets/pro-angular-logo.png rename to src/assets/images/pro-angular-logo.png