Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added additional features and inputs. Updated documentation. #4

Merged
merged 1 commit into from
Jul 28, 2022
Merged

Added additional features and inputs. Updated documentation. #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .prettierignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,5 @@
# Except these files and directories:
!.github/
!.husky/
!.scripts/
!e2e/src
!src/
101 changes: 54 additions & 47 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,29 @@ Configurable, lightweight back to top button for Angular projects.
<img src="src/assets/images/demo-scroll-top.gif" />
</p>

# Usage
To run this demo:
* `git clone https://github.com/ProAngular/ngx-scroll-top.git`
* `cd ngx-scroll-top`
* `npm install`
* `npm run start`

Install package
# Installation and importing

## Installation

Angular
```bash
ng add @proangular/ngx-scroll-top@latest
```

Direct
```bash
npm install @proangular/ngx-scroll-top --save
```

Import package
## Import

Import package into the module of your choice
```diff
...
+ import { NgxScrollTopModule } from '@proangular/ngx-scroll-top';
Expand All @@ -48,39 +63,42 @@ Import package
export class AppModule { }
```

Use package
# Usage and Examples

Default use (blue button with white icon)
```html
<ngx-scroll-top></ngx-scroll-top>
```

# 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)

Example with optional inputs
```html
<ngx-scroll-top
backgroundColor="black"
[bottomOffset]="footerHeightPx || 200"
displayAtYPosition="250px"
backgroundColor="#0D58C0"
[bottomOffset]="footer.height"
[displayAtYPosition]="1000"
fontColor="#FFFAFA"
fontSize="2rem"
height="3rem"
position="left"
styleHeight="30px"
styleWidth="30px"
[styleZIndex]="500"
>
↑
</ngx-scroll-top>
[zIndex]="1"
width="3rem"
>&#8686;</ngx-scroll-top>
```

# Component API

| Input | Value Typing | Default Value | Description |
| ---------------------- | --------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| **backgroundColor** | string | `'#0D58C0'` (dark-blue) | Background color of the back to top button. Define any `'x'` css property available for `'background-color: x'`. |
| **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. |
| **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'`. |
| **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'`. |
| **height** | string | `'40px'` | Height of back to top button in string px format. |
| **position** | `'left'` \| `'right'` | `'right'` | Position on-screen where the back to top button is displayed. |
| **width** | string | `'40px'` | Width of back to top button in string px format. |
| **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. |

# Compatibility

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

1. Clone, create new branch.

`git clone https://github.com/ProAngular/ngx-scroll-top.git`

`git checkout -b username/feature`

* `git clone https://github.com/ProAngular/ngx-scroll-top.git`
* `git checkout -b username/feature`
2. Bump version of package in `package.json` and `package-lock.json`, commit all changes, push.

`git add -A`

`git commit -m "My commit message"`

`git push origin username/feature`

* `git add -A`
* `git commit -m "My commit message"`
* `git push origin username/feature`
3. Submit code in published PR for review and approval. Add a good description and link any possible user stories or bugs.

[Create a new pull request](https://github.com/ProAngular/ngx-scroll-top/compare).

* [Create a new pull request](https://github.com/ProAngular/ngx-scroll-top/compare).
4. Allow CI actions to completely run and verify files.
5. Add/ping reviewers and await approval.

Thank you for your contributions!
Thank you for any and all 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)
* [https://www.paypal.me/CodyTolene](https://www.paypal.me/CodyTolene)
* [https://github.com/sponsors/ProAngular](https://github.com/sponsors/ProAngular)

# License

Expand Down
Loading