From 0721a3b244fcf403ce0f3ff4f6a6e86c99a4ffec Mon Sep 17 00:00:00 2001 From: Daybrush Date: Tue, 22 Feb 2022 18:38:35 +0900 Subject: [PATCH] docs: fix README --- packages/ngx-conveyer/README.md | 4 +- .../projects/ngx-conveyer/README.md | 141 +++++++++++++----- .../projects/ngx-conveyer/package-lock.json | 2 +- .../projects/ngx-conveyer/package.json | 2 +- 4 files changed, 104 insertions(+), 45 deletions(-) diff --git a/packages/ngx-conveyer/README.md b/packages/ngx-conveyer/README.md index 26a40340..cfa3f828 100644 --- a/packages/ngx-conveyer/README.md +++ b/packages/ngx-conveyer/README.md @@ -58,8 +58,8 @@ export class AppModule { } /* Your app */ ```html
- - + +
1
2
diff --git a/packages/ngx-conveyer/projects/ngx-conveyer/README.md b/packages/ngx-conveyer/projects/ngx-conveyer/README.md index 43f2d5d3..cfa3f828 100644 --- a/packages/ngx-conveyer/projects/ngx-conveyer/README.md +++ b/packages/ngx-conveyer/projects/ngx-conveyer/README.md @@ -1,80 +1,139 @@ -## ngx-conveyer +

+ Conveyer Logo
+ Angular Conveyer +

-```sh -$ npm i ngx-conveyer -``` +

+ version + npm weekly downloads + npm bundle size (scoped) + Github actions + Coveralls github + + +

+

+ Demo / Documentation / Other components +

-### use reference variable with reactive state -``` -#refName="ngxConveyer" +

+ Conveyer adds Drag gestures to your Native Scroll.
📱💻🖥 +

+ + +----- + +## ✨ Features +- You can use Native Scroll-like behavior through Drag. +- By adding easing features such as bounce, elasticity, and back, you can create smooth scrolling animations like Native Scroll. +- Supports Reactive Properties that can detect changes, such as isReachStart, isReachEnd. +- You can use custom scroll events like onBeginScroll, onFinishScroll, onReachStart, onLeaveStart, + +## ⚙️ Installation +```bash +$ npm install @egjs/ngx-conveyer ``` -* refName.isReachStart -* refName.isReachEnd -```js -import { NgModule } from '@angular/core'; +## 🏃 Quick Start +### Module definition +```diff ++import { NgxConveyerModule } from '@egjs/ngx-conveyer'; import { BrowserModule } from '@angular/platform-browser'; -import { NgxConveyerModule } from 'ngx-conveyer'; - -import { AppComponent } from './app.component'; +import { NgModule } from '@angular/core'; @NgModule({ declarations: [ - AppComponent, + AppComponent ], imports: [ BrowserModule, - NgxConveyerModule, ++ NgxConveyerModule /* Add in imports */ ], providers: [], bootstrap: [AppComponent] }) -export class AppModule { } +export class AppModule { } /* Your app */ ``` + ```html -
- - -
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
+
+ + +
+
1
+
2
+
3
``` + ```ts -import { Component, ViewChild } from '@angular/core'; -import { NgxConveyerDirective } from 'ngx-conveyer'; +import { Component, Input, AfterViewInit } from '@angular/core'; +import { NgxConveyerComponent } from '@egjs/ngx-conveyer'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] }) -export class AppComponent { - @ViewChild("conveyer") cv!: NgxConveyerDirective; - title = 'ngx-conveyer-project'; +export class AppComponent implements AfterViewInit { + @ViewChild("conveyer") conveyer!: NgxConveyerComponent; prev() { - this.cv.scrollIntoView("prev", { + this.conveyer.scrollIntoView("prev", { align: "end", duration: 500, }); } next() { - this.cv.scrollIntoView("next", { + this.conveyer.scrollIntoView("next", { align: "start", duration: 500, }); } } ``` + + +## 🌐 Supported Browsers +|IE|Chrome|Firefox|Safari|iOS|Android| +|:---:|:---:|:---:|:---:|:---:|:---:| +|9+(With polyfill), 11+ for Angular & Svelte|Latest|Latest|Latest|7+|4+| + +## 📼 Demos +Check our [Demos](https://naver.github.io/egjs-conveyer/). + +## 📖 Documentation +See [Documentation](https://naver.github.io/egjs-conveyer/release/latest/doc/index.html) page. + +## 🙌 Contributing +See [CONTRIBUTING.md](https://github.com/naver/egjs-conveyer/blob/main/CONTRIBUTING.md). + +## 📝 Feedback +Please file an [Issue](https://github.com/naver/egjs-conveyer/issues). + + +## 📜 License +@egjs/ngx-conveyer is released under the [MIT license](https://github.com/naver/egjs-conveyer/blob/main/LICENSE). + +``` +Copyright (c) 2022-present NAVER Corp. +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. +``` + +

+        +

diff --git a/packages/ngx-conveyer/projects/ngx-conveyer/package-lock.json b/packages/ngx-conveyer/projects/ngx-conveyer/package-lock.json index dd0b4446..8b7219b3 100644 --- a/packages/ngx-conveyer/projects/ngx-conveyer/package-lock.json +++ b/packages/ngx-conveyer/projects/ngx-conveyer/package-lock.json @@ -1,6 +1,6 @@ { "name": "@egjs/ngx-conveyer", - "version": "1.0.0", + "version": "1.0.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/ngx-conveyer/projects/ngx-conveyer/package.json b/packages/ngx-conveyer/projects/ngx-conveyer/package.json index 3de39480..f32bd9ca 100644 --- a/packages/ngx-conveyer/projects/ngx-conveyer/package.json +++ b/packages/ngx-conveyer/projects/ngx-conveyer/package.json @@ -1,6 +1,6 @@ { "name": "@egjs/ngx-conveyer", - "version": "1.0.0", + "version": "1.0.1", "description": "Angular Conveyer adds Drag gestures to your Native Scroll.", "author": { "name": "NAVER Corp."