From b7a95b4a159e92a80c18f21501eb920fe10ee805 Mon Sep 17 00:00:00 2001 From: BART! Date: Thu, 26 Sep 2019 19:28:30 +0200 Subject: [PATCH] =?UTF-8?q?chore(update):=20release=200.5.0=20=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- projects/ngx-scrolltop/README.md | 91 ++++++++++++++++++++++++----- projects/ngx-scrolltop/package.json | 2 +- 3 files changed, 77 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index 7b029a1..c9d4908 100644 --- 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 (https://github.com/bartholomej)", "scripts": { diff --git a/projects/ngx-scrolltop/README.md b/projects/ngx-scrolltop/README.md index 5ed83f4..1e8fc23 100644 --- 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,11 +32,13 @@ 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** @@ -42,7 +46,7 @@ Via **yarn** or **npm** yarn add ngx-scrolltop # npm install ngx-scrolltop --save ``` -### Setup +### Setup (manually) ```diff ... @@ -60,7 +64,9 @@ 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. @@ -68,19 +74,44 @@ In **app.component.html** you just need to add your new button. Usually at the e ``` +### 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 + + ↑ My Custom Element. ↑ + +``` + ## 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 ``` +### Angular Material example (directive) + +_[@angular/material](https://material.angular.io/components/button/overview) required_ + +**app.component.html** + +```html + +``` + +**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 index a1601e5..fd3a6ea 100644 --- 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 (https://github.com/bartholomej)", "peerDependencies": {