Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,3 +57,23 @@ Pass in a unique name to the ngSortGridGroup input
You can also use the async pipe to display items

![Grid demo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/gs6.png)

# Style your items on different events
The ng-sortgrid adds different classes on different events to your items. You can either use those classes to style the appereance
of your items on certain events or you can include the build in CSS from the ng-sortgrid library.

## Integrate the build in CSS
To integrate the built in Stylesheet just import in in your angular.json.

```
"styles": [
"node_modules/ng-sortgrid/dist/lib/ngsg.css",
],
```

Alternative you can provide custom styles for the different classes listed bellow
| Class | Description |
|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------|
| ng-sg-placeholder | This class is added to the placeholder item which previews where the item is inserted |
| 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 |
| 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 |
14 changes: 0 additions & 14 deletions projects/ng-sortgrid/src/lib/ngsg-class.service.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,18 +49,4 @@ describe('NgsgClassService', () => {
expect(removeClassSpy).toHaveBeenCalledWith('ng-sg-selected');
});

it('should add the dropped class', () => {
const addClassSpy = createSpy();
const element = {classList: {add: addClassSpy}} as any;
sut.addActiveClass(element);
expect(addClassSpy).toHaveBeenCalledWith('ng-sg-active');
});

it('should remove the placeholder class', () => {
const removeClassSpy = createSpy();
const element = {classList: {remove: removeClassSpy}} as any;
sut.removeActiveClass(element);
expect(removeClassSpy).toHaveBeenCalledWith('ng-sg-active');
});

});
7 changes: 0 additions & 7 deletions projects/ng-sortgrid/src/lib/ngsg-class.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,4 @@ export class NgsgClassService {
element.classList.remove(this.SELECTED_DEFAULT_CLASS);
}

public addActiveClass(element: Element): void {
element.classList.add(this.ACTIVE_DEFAULT_CLASS);
}

public removeActiveClass(element: Element): void {
element.classList.remove(this.ACTIVE_DEFAULT_CLASS);
}
}