Skip to content

Commit 787785a

Browse files
committed
docs(readme): add README
1 parent 46fcab2 commit 787785a

File tree

1 file changed

+80
-0
lines changed

1 file changed

+80
-0
lines changed

projects/ng-sortgrid/README.md

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
[![Travis build badge](https://img.shields.io/travis/kreuzerk/ng-sortgrid.svg)](https://travis-ci.org/kreuzerk/ng-sortgrid)
2+
[![codecov](https://codecov.io/gh/kreuzerk/ng-sortgrid/branch/master/graph/badge.svg)](https://codecov.io/gh/kreuzerk/ng-sortgrid)
3+
[![angular7](https://img.shields.io/badge/angular%207%20ready-true-green.svg)]()
4+
5+
![Logo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/logo-new.png)
6+
7+
![Grid demo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/grid-demo.gif)
8+
9+
Read the README or just simply check out our demo at: https://kreuzerk.github.io/ng-sortgrid/
10+
11+
- [Getting started](#getting-started)
12+
- [Download the module](#download-the-module)
13+
- [Apply the directive](#apply-the-directive)
14+
- [React on changes](#react-on-changes)
15+
16+
# Getting started
17+
## Download the module
18+
19+
```
20+
npm i -s ng-sortgrid
21+
```
22+
23+
Import the ```NgsgModule``` in your ```AppModule```.
24+
25+
```
26+
...
27+
imports: [BrowserModule, NgsgModule],
28+
...
29+
```
30+
31+
## Apply the directive
32+
Loop over your elements with *ngFor. 🛎️ the items needs to be an array. Alternate you can also use the async pipe to pass in your items.
33+
34+
![Grid demo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/gs1.png)
35+
36+
Apply the ngSortgridItem directive
37+
38+
![Grid demo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/gs2.png)
39+
40+
## React on changes
41+
In most cases you are interested in the new sort order. Often you want to store them in local storage or even send them to the backend. To do so the following two steps are needed in addition to the "Getting started" step.
42+
43+
Pass your items to the directive via the ngSortGridItems input.
44+
45+
![Grid demo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/gs3.png)
46+
React on the 'sorted' output events
47+
48+
![Grid demo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/gs4.png)
49+
50+
## Group sortgrids
51+
In case you have more than one sortgriditem on the page you need to group the sortgriditems to avoid dropping drags from one group in another group.
52+
Pass in a unique name to the ngSortGridGroup input
53+
54+
![Grid demo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/gs5.png)
55+
56+
## Use the async pipe
57+
You can also use the async pipe to display items
58+
59+
![Grid demo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/gs6.png)
60+
61+
# Style your items on different events
62+
The ng-sortgrid adds different classes on different events to your items. You can either use those classes to style the appereance
63+
of your items on certain events or you can include the build in CSS from the ng-sortgrid library.
64+
65+
## Integrate the build in CSS
66+
To integrate the built in Stylesheet just import in in your angular.json.
67+
68+
```
69+
"styles": [
70+
"node_modules/ng-sortgrid/dist/lib/ngsg.css",
71+
],
72+
```
73+
74+
Alternative you can provide custom styles for the different classes listed bellow
75+
76+
| Class | Description |
77+
|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------|
78+
| ng-sg-placeholder | This class is added to the placeholder item which previews where the item is inserted |
79+
| ng-sg-dropped | This class is added as soon after you drop an item. The class will be on the item for 500 milliseconds before it gets removed |
80+
| ng-sg-selected | This class is added when you press the CMD or the Ctrl Key and Click on an item. It indicates which items are selected for the multi drag&drop |

0 commit comments

Comments
 (0)