Skip to content

Commit 734c99d

Browse files
committed
fix(readme): add style docs
1 parent 83e7651 commit 734c99d

File tree

3 files changed

+20
-21
lines changed

3 files changed

+20
-21
lines changed

README.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,3 +57,23 @@ Pass in a unique name to the ngSortGridGroup input
5757
You can also use the async pipe to display items
5858

5959
![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+
| Class | Description |
76+
|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------|
77+
| ng-sg-placeholder | This class is added to the placeholder item which previews where the item is inserted |
78+
| 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 |
79+
| 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 |

projects/ng-sortgrid/src/lib/ngsg-class.service.spec.ts

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -49,18 +49,4 @@ describe('NgsgClassService', () => {
4949
expect(removeClassSpy).toHaveBeenCalledWith('ng-sg-selected');
5050
});
5151

52-
it('should add the dropped class', () => {
53-
const addClassSpy = createSpy();
54-
const element = {classList: {add: addClassSpy}} as any;
55-
sut.addActiveClass(element);
56-
expect(addClassSpy).toHaveBeenCalledWith('ng-sg-active');
57-
});
58-
59-
it('should remove the placeholder class', () => {
60-
const removeClassSpy = createSpy();
61-
const element = {classList: {remove: removeClassSpy}} as any;
62-
sut.removeActiveClass(element);
63-
expect(removeClassSpy).toHaveBeenCalledWith('ng-sg-active');
64-
});
65-
6652
});

projects/ng-sortgrid/src/lib/ngsg-class.service.ts

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,4 @@ export class NgsgClassService {
3333
element.classList.remove(this.SELECTED_DEFAULT_CLASS);
3434
}
3535

36-
public addActiveClass(element: Element): void {
37-
element.classList.add(this.ACTIVE_DEFAULT_CLASS);
38-
}
39-
40-
public removeActiveClass(element: Element): void {
41-
element.classList.remove(this.ACTIVE_DEFAULT_CLASS);
42-
}
4336
}

0 commit comments

Comments
 (0)