Skip to content

Commit db54aa3

Browse files
committed
Update documentation
1 parent 917e0f1 commit db54aa3

File tree

3 files changed

+91
-2
lines changed

3 files changed

+91
-2
lines changed

README.md

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,98 @@
1616
[![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)
1717

1818
# Description
19+
1920
Configurable, lightweight back to top button for Angular projects.
2021

22+
# Compatibility
23+
24+
| Angular version | @proangular/ngx-scroll-top | Install |
25+
| --------------- | -------------------------- | ------------------------------------------ |
26+
| v14 | v1.x.x | `ng add @proangular/ngx-scroll-top@latest` |
27+
| v13 | v1.x.x | `ng add @proangular/ngx-scroll-top@latest` |
28+
| v12 | v1.x.x | `ng add @proangular/ngx-scroll-top@latest` |
29+
2130
# Demo
31+
2232
<p align="center">
2333
<img src="src/assets/images/demo-scroll-top.gif" />
2434
</p>
35+
36+
# Usage
37+
38+
Install package
39+
```bash
40+
npm install @proangular/ngx-scroll-top --save
41+
```
42+
43+
Import package
44+
```diff
45+
...
46+
+ import { NgxScrollTopModule } from '@proangular/ngx-scroll-top';
47+
...
48+
49+
@NgModule({
50+
imports: [
51+
...
52+
+ NgxScrollTopModule
53+
],
54+
...
55+
})
56+
export class AppModule { }
57+
```
58+
59+
Use package
60+
```html
61+
<ngx-scroll-top></ngx-scroll-top>
62+
```
63+
64+
# Component API
65+
66+
| Input | Value Typing | Default Value | Description |
67+
| ---------------------- | --------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
68+
| **backgroundColor** | string | `'#1775d1'` (blue) | Background color of the back to top button (hex string). |
69+
| **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. |
70+
| **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. |
71+
| **position** | `'left'` \| `'right'` | `'right'` | Position on-screen where the back to top button is displayed. |
72+
| **styleHeight** | string | `'25px'` | Height of back to top button in string px format. |
73+
| **styleWidth** | string | `'25px'` | Width of back to top button in string px format. |
74+
| **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. |
75+
76+
# Example(s)
77+
78+
```html
79+
<ngx-scroll-top
80+
backgroundColor="black"
81+
[bottomOffset]="footerHeightPx || 200"
82+
displayAtYPosition="250px"
83+
position="left"
84+
styleHeight="30px"
85+
styleWidth="30px"
86+
[styleZIndex]="500"
87+
>
88+
89+
</ngx-scroll-top>
90+
```
91+
92+
# Development
93+
94+
1. Pull, create new branch, add changes.
95+
2. Bump version of package in `package.json` and `package-lock.json`, commit all changes, push.
96+
3. Submit code in published PR for review and approval.
97+
4. Allow CI actions to completely run and verify files.
98+
99+
Thank you for your contributions!
100+
101+
# Donation
102+
103+
As a husband and father of four children, your donations mean the world to me! Any donations are greatly appreciated and keep me going!
104+
[https://www.paypal.me/CodyTolene](https://www.paypal.me/CodyTolene)
105+
[https://github.com/sponsors/ProAngular](https://github.com/sponsors/ProAngular)
106+
107+
# License
108+
109+
Copyright &copy; 2022 [Cody Tolene](https//www.CodyTolene.com)
110+
111+
All contents are licensed under the [MIT license].
112+
113+
[mit license]: LICENSE

package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@proangular/ngx-scroll-top",
3-
"version": "1.1.2",
3+
"version": "1.1.3",
44
"description": "Configurable, lightweight back to top button for Angular projects.",
55
"author": "Pro Angular <webmaster@proangular.com>",
66
"homepage": "https://www.proangular.com",

0 commit comments

Comments
 (0)