Skip to content

Commit 618735a

Browse files
CodyToleneCodyTolene
authored
Merge pull request #4 from ProAngular/ct/additional-features-and-doc-updates
Added additional features and inputs. Updated documentation.
2 parents 7bde642 + 03adb46 commit 618735a

14 files changed

+5671
-1619
lines changed

‎.prettierignore

-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,5 @@
44
# Except these files and directories:
55
!.github/
66
!.husky/
7-
!.scripts/
87
!e2e/src
98
!src/

‎README.md

+54-47
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,29 @@ Configurable, lightweight back to top button for Angular projects.
2525
<img src="src/assets/images/demo-scroll-top.gif" />
2626
</p>
2727

28-
# Usage
28+
To run this demo:
29+
* `git clone https://github.com/ProAngular/ngx-scroll-top.git`
30+
* `cd ngx-scroll-top`
31+
* `npm install`
32+
* `npm run start`
2933

30-
Install package
34+
# Installation and importing
35+
36+
## Installation
37+
38+
Angular
39+
```bash
40+
ng add @proangular/ngx-scroll-top@latest
41+
```
42+
43+
Direct
3144
```bash
3245
npm install @proangular/ngx-scroll-top --save
3346
```
3447

35-
Import package
48+
## Import
49+
50+
Import package into the module of your choice
3651
```diff
3752
...
3853
+ import { NgxScrollTopModule } from '@proangular/ngx-scroll-top';
@@ -48,39 +63,42 @@ Import package
4863
export class AppModule { }
4964
```
5065

51-
Use package
66+
# Usage and Examples
67+
68+
Default use (blue button with white icon)
5269
```html
5370
<ngx-scroll-top></ngx-scroll-top>
5471
```
5572

56-
# Component API
57-
58-
| Input | Value Typing | Default Value | Description |
59-
| ---------------------- | --------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
60-
| **backgroundColor** | string | `'#1775d1'` (blue) | Background color of the back to top button (hex string). |
61-
| **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. |
62-
| **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. |
63-
| **position** | `'left'` \| `'right'` | `'right'` | Position on-screen where the back to top button is displayed. |
64-
| **styleHeight** | string | `'25px'` | Height of back to top button in string px format. |
65-
| **styleWidth** | string | `'25px'` | Width of back to top button in string px format. |
66-
| **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. |
67-
68-
# Example(s)
69-
73+
Example with optional inputs
7074
```html
7175
<ngx-scroll-top
72-
backgroundColor="black"
73-
[bottomOffset]="footerHeightPx || 200"
74-
displayAtYPosition="250px"
76+
backgroundColor="#0D58C0"
77+
[bottomOffset]="footer.height"
78+
[displayAtYPosition]="1000"
79+
fontColor="#FFFAFA"
80+
fontSize="2rem"
81+
height="3rem"
7582
position="left"
76-
styleHeight="30px"
77-
styleWidth="30px"
78-
[styleZIndex]="500"
79-
>
80-
↑
81-
</ngx-scroll-top>
83+
[zIndex]="1"
84+
width="3rem"
85+
>&#8686;</ngx-scroll-top>
8286
```
8387

88+
# Component API
89+
90+
| Input | Value Typing | Default Value | Description |
91+
| ---------------------- | --------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
92+
| **backgroundColor** | string | `'#0D58C0'` (dark-blue) | Background color of the back to top button. Define any `'x'` css property available for `'background-color: x'`. |
93+
| **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. |
94+
| **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. |
95+
| **fontColor** | string | `'#FFFFFF'` (white) | The font color for the nested content within the back to top button. Define any `'x'` css property available for `'color: x'`. |
96+
| **fontSize** | string | `'16px'` | The font size for the nested content within the back to top button. Define any `'x'` css property available for `'font-size: x'`. |
97+
| **height** | string | `'40px'` | Height of back to top button in string px format. |
98+
| **position** | `'left'` \| `'right'` | `'right'` | Position on-screen where the back to top button is displayed. |
99+
| **width** | string | `'40px'` | Width of back to top button in string px format. |
100+
| **zIndex** | 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. |
101+
84102
# Compatibility
85103

86104
| Angular version | @proangular/ngx-scroll-top | Install |
@@ -92,35 +110,24 @@ Use package
92110
# Development
93111

94112
1. Clone, create new branch.
95-
96-
`git clone https://github.com/ProAngular/ngx-scroll-top.git`
97-
98-
`git checkout -b username/feature`
99-
113+
* `git clone https://github.com/ProAngular/ngx-scroll-top.git`
114+
* `git checkout -b username/feature`
100115
2. Bump version of package in `package.json` and `package-lock.json`, commit all changes, push.
101-
102-
`git add -A`
103-
104-
`git commit -m "My commit message"`
105-
106-
`git push origin username/feature`
107-
116+
* `git add -A`
117+
* `git commit -m "My commit message"`
118+
* `git push origin username/feature`
108119
3. Submit code in published PR for review and approval. Add a good description and link any possible user stories or bugs.
109-
110-
[Create a new pull request](https://github.com/ProAngular/ngx-scroll-top/compare).
111-
120+
* [Create a new pull request](https://github.com/ProAngular/ngx-scroll-top/compare).
112121
4. Allow CI actions to completely run and verify files.
113122
5. Add/ping reviewers and await approval.
114123

115-
Thank you for your contributions!
124+
Thank you for any and all contributions!
116125

117126
# Donation
118127

119128
As a husband and father of four children, your donations mean the world to me! Any donations are greatly appreciated and keep me going!
120-
121-
[https://www.paypal.me/CodyTolene](https://www.paypal.me/CodyTolene)
122-
123-
[https://github.com/sponsors/ProAngular](https://github.com/sponsors/ProAngular)
129+
* [https://www.paypal.me/CodyTolene](https://www.paypal.me/CodyTolene)
130+
* [https://github.com/sponsors/ProAngular](https://github.com/sponsors/ProAngular)
124131

125132
# License
126133

0 commit comments

Comments
 (0)