chore(update): release 0.5.0 🚀

bartholomej · Sep 26, 2019 · b7a95b4 · b7a95b4
1 parent 544c6ce
commit b7a95b4
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-scrolltop",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Lightweight, Material Design inspired button for scroll-to-top of the page. No dependencies. Pure Angular!",
   "author": "Lukas Bartak <[email protected]> (https://github.com/bartholomej)",
   "scripts": {

diff --git a/projects/ngx-scrolltop/README.md b/projects/ngx-scrolltop/README.md
@@ -10,10 +10,12 @@ Lightweight, **Material Design inspired button for scroll-to-top** of the page.
 Just hit the button to smoothly scroll back to the top of the page. [Here's the demo.](http://bartholomej.github.io/ngx-scrolltop/)
 
 - Lightweight _(~10 kB)_
+- No dependencies
 - Material Design inspired
+- `@angular/material` compatible ([example](#angular-material-example-directive))
+- Component or directive way
 - Smoothly animated
-- Highly customizable
-- With some useful [options](#settings)...
+- Highly customizable [options](#options)...
 
 ![Demo animation](https://github.com/bartholomej/material-scrollTop/blob/master/demo/images/material-scrolltop-animation.gif)
 
@@ -30,19 +32,21 @@ Watch this: [http://bartholomej.github.io/ngx-scrolltop/
 ng add ngx-scrolltop
 ```
 
-_Module imported and all settings automatically set in your project._
+**Everything done!**
 
 _Now just see some [options](#options)._
 
-### Manually (alternatively) 🛠
+_(Module imported and all settings automatically set in your project.)_
+
+### Manually (old-school) 🛠
 
 Via **yarn** or **npm**
 
 ```bash
 yarn add ngx-scrolltop # npm install ngx-scrolltop --save
 ```
 
-### Setup
+### Setup (manually)
 
 ```diff
 ...
@@ -60,27 +64,54 @@ yarn add ngx-scrolltop # npm install ngx-scrolltop --save
 export class AppModule { }
 ```
 
-### Usage
+## Usage
+
+### Component way (default)
 
 In **app.component.html** you just need to add your new button. Usually at the end of file.
 
 ```html
 <ngx-scrolltop></ngx-scrolltop>
 ```
 
+### Directive way
+
+**Your custom element somewhere in you application...**
+
+**Important**: _(no style applied, everything is up to you. Of course I recommend `position: fixed`, ...)_
+
+```html
+<span
+  ngxScrollTop
+  class="my-custom-element-with-my-style__no-lib-style-applied-here"
+>
+  ↑ My Custom Element. ↑
+</span>
+```
+
 ## Options
 
-| Option              | Type                                                                            | Default   | Description                                                                                                                                                                                              |
-| ------------------- | ------------------------------------------------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **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. |
-| **backgroundColor** | string                                                                          | #212121   | Background color (you can use all values for `backgroud-color` css property). _You can override `theme` color_                                                                                           |
-| **symbolColor**     | string                                                                          | #fafafa   | Symbol color (you can use all values for `fill` svg property). _You can override `theme` color_                                                                                                          |
-| **size**            | number                                                                          | 40        | Button size [in pixels]. _(Symbol will be resized automatically_)                                                                                                                                        |
-| **symbol**          | string                                                                          |           | You can use utf8 chars for customizing symbol. For example: `↑`                                                                                                                                          |
-| **position**        | 'left' \| 'right'                                                               | 'right'   | Left or right, that is the question...                                                                                                                                                                   |
-| **theme**           | [NgxScrollTopTheme](projects/ngx-scrolltop/src/lib/ngx-scrolltop.interfaces.ts) | 'gray'    | Material color themes                                                                                                                                                                                    |
+### Component
+
+| Option              | Type                                                                           | Default   | Description                                                                                                                                                                                              |
+| ------------------- | ------------------------------------------------------------------------------ | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **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. |
+| **backgroundColor** | string                                                                         | #212121   | Background color (you can use all values for `backgroud-color` css property). _You can override `theme` color_                                                                                           |
+| **symbolColor**     | string                                                                         | #fafafa   | Symbol color (you can use all values for `fill` svg property). _You can override `theme` color_                                                                                                          |
+| **size**            | number                                                                         | 40        | Button size [in pixels]. _(Symbol will be resized automatically_)                                                                                                                                        |
+| **symbol**          | string                                                                         |           | You can use utf8 chars for customizing symbol. For example: `↑`                                                                                                                                          |
+| **position**        | 'left' \| 'right'                                                              | 'right'   | Left or right, that is the question...                                                                                                                                                                   |
+| **theme**           | [NgxScrollTopTheme](projects/ngx-scrolltop/src/lib/ngx-scrolltop.interface.ts) | 'gray'    | Material color themes                                                                                                                                                                                    |
+
+### Directive
+
+| Option                 | Type                 | Default   | Description                                                                                                                                                                                              |
+| ---------------------- | -------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **[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. |
 
-### Options: Example
+## Examples
+
+### Advanced example (component)
 
 **app.component.html**
 
@@ -97,6 +128,34 @@ In **app.component.html** you just need to add your new button. Usually at the e
 </ngx-scrolltop>
 ```
 
+### Angular Material example (directive)
+
+_[@angular/material](https://material.angular.io/components/button/overview) required_
+
+**app.component.html**
+
+```html
+<button
+  ngxScrollTop
+  [ngxScrollTopMode]="'smart'"
+  class="my-custom-style"
+  color="primary"
+  mat-mini-fab
+>
+  top
+</button>
+```
+
+**app.component.scss**
+
+```css
+.my-custom-style {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+}
+```
+
 ## Dependencies
 
 No dependencies! Pure Angular.

diff --git a/projects/ngx-scrolltop/package.json b/projects/ngx-scrolltop/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-scrolltop",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Lightweight, Material Design inspired button for scroll-to-top of the page. No dependencies. Pure Angular!",
   "author": "Lukas Bartak <[email protected]> (https://github.com/bartholomej)",
   "peerDependencies": {