ng-virtual-list 0.3.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +101 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -12,7 +12,103 @@ npm i ng-virtual-list
|
|
|
12
12
|
|
|
13
13
|
## Examples
|
|
14
14
|
|
|
15
|
-
###
|
|
15
|
+
### Horizontal virtual list
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
Template:
|
|
20
|
+
```html
|
|
21
|
+
<ng-virtual-list class="list" direction="hotizontal" [items]="horizontalItems"
|
|
22
|
+
[itemRenderer]="hotizontalItemRenderer" [itemSize]="64"></ng-virtual-list>
|
|
23
|
+
|
|
24
|
+
<ng-template #hotizontalItemRenderer let-data="data">
|
|
25
|
+
@if (data) {
|
|
26
|
+
<div class="list__h-container" (click)="onItemClick(data)">
|
|
27
|
+
<span>{{data.name}}</span>
|
|
28
|
+
</div>
|
|
29
|
+
}
|
|
30
|
+
</ng-template>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Component:
|
|
34
|
+
```ts
|
|
35
|
+
import { NgVirtualListComponent, IVirtualListCollection } from 'ng-virtual-list';
|
|
36
|
+
|
|
37
|
+
const HORIZONTAL_ITEMS: IVirtualListCollection = [];
|
|
38
|
+
for (let i = 0, l = 1000000; i < l; i++) {
|
|
39
|
+
HORIZONTAL_ITEMS.push({ id: i + 1, name: `${i}` });
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@Component({
|
|
43
|
+
selector: 'app-root',
|
|
44
|
+
imports: [NgVirtualListComponent],
|
|
45
|
+
templateUrl: './app.component.html',
|
|
46
|
+
styleUrl: './app.component.scss'
|
|
47
|
+
})
|
|
48
|
+
export class AppComponent {
|
|
49
|
+
horizontalItems = HORIZONTAL_ITEMS;
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Horizontal grouped virtual list
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
Template:
|
|
58
|
+
```html
|
|
59
|
+
<ng-virtual-list class="list" direction="hotizontal" [items]="horizontalGroupItems" [itemRenderer]="horizontalGroupItemRenderer"
|
|
60
|
+
[stickyMap]="horizontalGroupItemsStickyMap" [itemSize]="80" [snap]="true"></ng-virtual-list>
|
|
61
|
+
|
|
62
|
+
<ng-template #horizontalGroupItemRenderer let-data="data">
|
|
63
|
+
@if (data) {
|
|
64
|
+
@switch (data.type) {
|
|
65
|
+
@case ("group-header") {
|
|
66
|
+
<div class="list__h-group-container">
|
|
67
|
+
<span>{{data.name}}</span>
|
|
68
|
+
</div>
|
|
69
|
+
}
|
|
70
|
+
@default {
|
|
71
|
+
<div class="list__h-container" (click)="onItemClick(data)">
|
|
72
|
+
<span>{{data.name}}</span>
|
|
73
|
+
</div>
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
</ng-template>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Component:
|
|
81
|
+
```ts
|
|
82
|
+
import { NgVirtualListComponent, IVirtualListCollection, IVirtualListStickyMap } from 'ng-virtual-list';
|
|
83
|
+
|
|
84
|
+
const GROUP_NAMES = ['A', 'B', 'C', 'D', 'E'];
|
|
85
|
+
|
|
86
|
+
const getGroupName = () => {
|
|
87
|
+
return GROUP_NAMES[Math.floor(Math.random() * GROUP_NAMES.length)];
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
const HORIZONTAL_GROUP_ITEMS: IVirtualListCollection = [],
|
|
91
|
+
HORIZONTAL_GROUP_ITEMS_STICKY_MAP: IVirtualListStickyMap = {};
|
|
92
|
+
|
|
93
|
+
for (let i = 0, l = 1000000; i < l; i++) {
|
|
94
|
+
const id = i + 1, type = Math.random() > .895 ? 'group-header' : 'item';
|
|
95
|
+
HORIZONTAL_GROUP_ITEMS.push({ id, type, name: type === 'group-header' ? getGroupName() : `${i}` });
|
|
96
|
+
HORIZONTAL_GROUP_ITEMS_STICKY_MAP[id] = type === 'group-header' ? 1 : 0;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
@Component({
|
|
100
|
+
selector: 'app-root',
|
|
101
|
+
imports: [NgVirtualListComponent],
|
|
102
|
+
templateUrl: './app.component.html',
|
|
103
|
+
styleUrl: './app.component.scss'
|
|
104
|
+
})
|
|
105
|
+
export class AppComponent {
|
|
106
|
+
horizontalGroupItems = HORIZONTAL_GROUP_ITEMS;
|
|
107
|
+
horizontalGroupItemsStickyMap = HORIZONTAL_GROUP_ITEMS_STICKY_MAP;
|
|
108
|
+
}
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
### Vertical virtual list
|
|
16
112
|
|
|
17
113
|
|
|
18
114
|
|
|
@@ -50,7 +146,7 @@ export class AppComponent {
|
|
|
50
146
|
}
|
|
51
147
|
```
|
|
52
148
|
|
|
53
|
-
###
|
|
149
|
+
### Vertical grouped virtual list
|
|
54
150
|
|
|
55
151
|
#### Without snapping
|
|
56
152
|
|
|
@@ -146,8 +242,9 @@ Inputs
|
|
|
146
242
|
| items | [IVirtualListCollection](https://github.com/DjonnyX/ng-virtual-list/blob/main/projects/ng-virtual-list/src/lib/models/collection.model.ts) | Collection of list items |
|
|
147
243
|
| itemSize | number | If direction = 'vertical', then the height of a typical element. If direction = 'horizontal', then the width of a typical element |
|
|
148
244
|
| itemRenderer | TemplateRef | Rendering element template |
|
|
149
|
-
| stickyMap | [IVirtualListStickyMap](https://github.com/DjonnyX/ng-virtual-list/blob/main/projects/ng-virtual-list/src/lib/models/sticky-map.model.ts) | Dictionary zIndex by id of the list element. If the value is not set or equal to 0, then a simple element is displayed, if the value is greater than 0, then the sticky position mode is enabled for the element |
|
|
245
|
+
| stickyMap | [IVirtualListStickyMap?](https://github.com/DjonnyX/ng-virtual-list/blob/main/projects/ng-virtual-list/src/lib/models/sticky-map.model.ts) | Dictionary zIndex by id of the list element. If the value is not set or equal to 0, then a simple element is displayed, if the value is greater than 0, then the sticky position mode is enabled for the element |
|
|
150
246
|
| snap | boolean? | Determines whether elements will snap. Default value is "true" |
|
|
247
|
+
| direction | [Directions](https://github.com/DjonnyX/ng-virtual-list/blob/main/projects/ng-virtual-list/src/lib/enums/direction.ts) | Determines the direction in which elements are placed. Default value is "vertical" |
|
|
151
248
|
|
|
152
249
|
<br/>
|
|
153
250
|
|
|
@@ -156,4 +253,4 @@ Outputs
|
|
|
156
253
|
| Event | Type | Description |
|
|
157
254
|
|---|---|---|
|
|
158
255
|
| onScroll | (e: Event) => void | Fires when the list has been scrolled |
|
|
159
|
-
| onScrollEnd | (e: Event) => void | Fires when the list has completed scrolling. |
|
|
256
|
+
| onScrollEnd | (e: Event) => void | Fires when the list has completed scrolling. |
|