Skip to content

Commit b7a95b4

Browse files
bartholomejbartholomej
committed
chore(update): release 0.5.0 🚀
1 parent 544c6ce commit b7a95b4

File tree

3 files changed

+77
-18
lines changed

3 files changed

+77
-18
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-scrolltop",
3-
"version": "0.4.1",
3+
"version": "0.5.0",
44
"description": "Lightweight, Material Design inspired button for scroll-to-top of the page. No dependencies. Pure Angular!",
55
"author": "Lukas Bartak <[email protected]> (https://github.com/bartholomej)",
66
"scripts": {

‎projects/ngx-scrolltop/README.md

Lines changed: 75 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,12 @@ Lightweight, **Material Design inspired button for scroll-to-top** of the page.
1010
Just hit the button to smoothly scroll back to the top of the page. [Here's the demo.](http://bartholomej.github.io/ngx-scrolltop/)
1111

1212
- Lightweight _(~10 kB)_
13+
- No dependencies
1314
- Material Design inspired
15+
- `@angular/material` compatible ([example](#angular-material-example-directive))
16+
- Component or directive way
1417
- Smoothly animated
15-
- Highly customizable
16-
- With some useful [options](#settings)...
18+
- Highly customizable [options](#options)...
1719

1820
![Demo animation](https://github.com/bartholomej/material-scrollTop/blob/master/demo/images/material-scrolltop-animation.gif)
1921

@@ -30,19 +32,21 @@ Watch this: [http://bartholomej.github.io/ngx-scrolltop/
3032
ng add ngx-scrolltop
3133
```
3234

33-
_Module imported and all settings automatically set in your project._
35+
**Everything done!**
3436

3537
_Now just see some [options](#options)._
3638

37-
### Manually (alternatively) 🛠
39+
_(Module imported and all settings automatically set in your project.)_
40+
41+
### Manually (old-school) 🛠
3842

3943
Via **yarn** or **npm**
4044

4145
```bash
4246
yarn add ngx-scrolltop # npm install ngx-scrolltop --save
4347
```
4448

45-
### Setup
49+
### Setup (manually)
4650

4751
```diff
4852
...
@@ -60,27 +64,54 @@ yarn add ngx-scrolltop # npm install ngx-scrolltop --save
6064
export class AppModule { }
6165
```
6266

63-
### Usage
67+
## Usage
68+
69+
### Component way (default)
6470

6571
In **app.component.html** you just need to add your new button. Usually at the end of file.
6672

6773
```html
6874
<ngx-scrolltop></ngx-scrolltop>
6975
```
7076

77+
### Directive way
78+
79+
**Your custom element somewhere in you application...**
80+
81+
**Important**: _(no style applied, everything is up to you. Of course I recommend `position: fixed`, ...)_
82+
83+
```html
84+
<span
85+
ngxScrollTop
86+
class="my-custom-element-with-my-style__no-lib-style-applied-here"
87+
>
88+
↑ My Custom Element. ↑
89+
</span>
90+
```
91+
7192
## Options
7293

73-
| Option | Type | Default | Description |
74-
| ------------------- | ------------------------------------------------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
75-
| **mode** | 'smart' \| 'classic' | 'classic' | **Smart** mode shows button only when you scroll more than two screens down and then you will try to go back to top. **Classic** mode shows button immediately when you scroll at least one screen down. |
76-
| **backgroundColor** | string | #212121 | Background color (you can use all values for `backgroud-color` css property). _You can override `theme` color_ |
77-
| **symbolColor** | string | #fafafa | Symbol color (you can use all values for `fill` svg property). _You can override `theme` color_ |
78-
| **size** | number | 40 | Button size [in pixels]. _(Symbol will be resized automatically_) |
79-
| **symbol** | string | | You can use utf8 chars for customizing symbol. For example: `↑` |
80-
| **position** | 'left' \| 'right' | 'right' | Left or right, that is the question... |
81-
| **theme** | [NgxScrollTopTheme](projects/ngx-scrolltop/src/lib/ngx-scrolltop.interfaces.ts) | 'gray' | Material color themes |
94+
### Component
95+
96+
| Option | Type | Default | Description |
97+
| ------------------- | ------------------------------------------------------------------------------ | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
98+
| **mode** | 'smart' \| 'classic' | 'classic' | **Smart** mode shows button only when you scroll more than two screens down and then you will try to go back to top. **Classic** mode shows button immediately when you scroll at least one screen down. |
99+
| **backgroundColor** | string | #212121 | Background color (you can use all values for `backgroud-color` css property). _You can override `theme` color_ |
100+
| **symbolColor** | string | #fafafa | Symbol color (you can use all values for `fill` svg property). _You can override `theme` color_ |
101+
| **size** | number | 40 | Button size [in pixels]. _(Symbol will be resized automatically_) |
102+
| **symbol** | string | | You can use utf8 chars for customizing symbol. For example: `↑` |
103+
| **position** | 'left' \| 'right' | 'right' | Left or right, that is the question... |
104+
| **theme** | [NgxScrollTopTheme](projects/ngx-scrolltop/src/lib/ngx-scrolltop.interface.ts) | 'gray' | Material color themes |
105+
106+
### Directive
107+
108+
| Option | Type | Default | Description |
109+
| ---------------------- | -------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
110+
| **[ngxScrollTopMode]** | 'smart' \| 'classic' | 'classic' | **Smart** mode shows button only when you scroll more than two screens down and then you will try to go back to top. **Classic** mode shows button immediately when you scroll at least one screen down. |
82111

83-
### Options: Example
112+
## Examples
113+
114+
### Advanced example (component)
84115

85116
**app.component.html**
86117

@@ -97,6 +128,34 @@ In **app.component.html** you just need to add your new button. Usually at the e
97128
</ngx-scrolltop>
98129
```
99130

131+
### Angular Material example (directive)
132+
133+
_[@angular/material](https://material.angular.io/components/button/overview) required_
134+
135+
**app.component.html**
136+
137+
```html
138+
<button
139+
ngxScrollTop
140+
[ngxScrollTopMode]="'smart'"
141+
class="my-custom-style"
142+
color="primary"
143+
mat-mini-fab
144+
>
145+
top
146+
</button>
147+
```
148+
149+
**app.component.scss**
150+
151+
```css
152+
.my-custom-style {
153+
position: fixed;
154+
right: 20px;
155+
bottom: 20px;
156+
}
157+
```
158+
100159
## Dependencies
101160

102161
No dependencies! Pure Angular.

‎projects/ngx-scrolltop/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-scrolltop",
3-
"version": "0.4.1",
3+
"version": "0.5.0",
44
"description": "Lightweight, Material Design inspired button for scroll-to-top of the page. No dependencies. Pure Angular!",
55
"author": "Lukas Bartak <[email protected]> (https://github.com/bartholomej)",
66
"peerDependencies": {

0 commit comments

Comments
 (0)