ng-virtual-list 0.2.3 → 0.2.4
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 +5 -91
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -29,50 +29,6 @@ Template:
|
|
|
29
29
|
</ng-template>
|
|
30
30
|
```
|
|
31
31
|
|
|
32
|
-
Styles:
|
|
33
|
-
```css
|
|
34
|
-
// reset ng-virtual-list-item styles
|
|
35
|
-
.ngvl-item__container {
|
|
36
|
-
background-color: unset;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.vl-section {
|
|
40
|
-
padding: 20px;
|
|
41
|
-
margin-bottom: 8px;
|
|
42
|
-
|
|
43
|
-
&>h1 {
|
|
44
|
-
margin-bottom: 0;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.list {
|
|
49
|
-
border-radius: 3px;
|
|
50
|
-
box-shadow: 1px 2px 8px 4px rgba(0, 0, 0, 0.075);
|
|
51
|
-
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
52
|
-
|
|
53
|
-
&__container {
|
|
54
|
-
width: 100%;
|
|
55
|
-
padding: 0 12px;
|
|
56
|
-
background-color: rgb(255, 255, 255);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
&__group-container {
|
|
60
|
-
width: 100%;
|
|
61
|
-
padding: 0 12px;
|
|
62
|
-
background-color: rgb(230, 234, 238);
|
|
63
|
-
font-weight: 600;
|
|
64
|
-
font-size: 14px;
|
|
65
|
-
text-transform: uppercase;
|
|
66
|
-
display: flex;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
&.simple {
|
|
70
|
-
height: 240px;
|
|
71
|
-
max-width: 640px;
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
```
|
|
75
|
-
|
|
76
32
|
Component:
|
|
77
33
|
```ts
|
|
78
34
|
import { NgVirtualListComponent, IVirtualListCollection } from 'ng-virtual-list';
|
|
@@ -96,6 +52,7 @@ export class AppComponent {
|
|
|
96
52
|
|
|
97
53
|
### Grouped virtual list
|
|
98
54
|
|
|
55
|
+
#### Without snapping
|
|
99
56
|
|
|
100
57
|
|
|
101
58
|
Template:
|
|
@@ -121,6 +78,8 @@ Template:
|
|
|
121
78
|
</ng-template>
|
|
122
79
|
```
|
|
123
80
|
|
|
81
|
+
#### With snapping
|
|
82
|
+
|
|
124
83
|
|
|
125
84
|
|
|
126
85
|
Template (with snapping):
|
|
@@ -146,50 +105,6 @@ Template (with snapping):
|
|
|
146
105
|
</ng-template>
|
|
147
106
|
```
|
|
148
107
|
|
|
149
|
-
Styles:
|
|
150
|
-
```css
|
|
151
|
-
// reset ng-virtual-list-item styles
|
|
152
|
-
.ngvl-item__container {
|
|
153
|
-
background-color: unset;
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
.vl-section {
|
|
157
|
-
padding: 20px;
|
|
158
|
-
margin-bottom: 8px;
|
|
159
|
-
|
|
160
|
-
&>h1 {
|
|
161
|
-
margin-bottom: 0;
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
.list {
|
|
166
|
-
border-radius: 3px;
|
|
167
|
-
box-shadow: 1px 2px 8px 4px rgba(0, 0, 0, 0.075);
|
|
168
|
-
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
169
|
-
|
|
170
|
-
&__container {
|
|
171
|
-
width: 100%;
|
|
172
|
-
padding: 0 12px;
|
|
173
|
-
background-color: rgb(255, 255, 255);
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
&__group-container {
|
|
177
|
-
width: 100%;
|
|
178
|
-
padding: 0 12px;
|
|
179
|
-
background-color: rgb(230, 234, 238);
|
|
180
|
-
font-weight: 600;
|
|
181
|
-
font-size: 14px;
|
|
182
|
-
text-transform: uppercase;
|
|
183
|
-
display: flex;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
&.simple {
|
|
187
|
-
height: 240px;
|
|
188
|
-
max-width: 640px;
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
```
|
|
192
|
-
|
|
193
108
|
Component:
|
|
194
109
|
```ts
|
|
195
110
|
import { NgVirtualListComponent, IVirtualListCollection, IVirtualListStickyMap } from 'ng-virtual-list';
|
|
@@ -232,7 +147,7 @@ Inputs
|
|
|
232
147
|
| itemHeight | number | Height of a typical list item |
|
|
233
148
|
| itemRenderer | TemplateRef | Rendering element template |
|
|
234
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 |
|
|
235
|
-
| snap | boolean? | Determines whether elements will snap |
|
|
150
|
+
| snap | boolean? | Determines whether elements will snap. Default value is "true" |
|
|
236
151
|
|
|
237
152
|
<br/>
|
|
238
153
|
|
|
@@ -241,5 +156,4 @@ Outputs
|
|
|
241
156
|
| Event | Type | Description |
|
|
242
157
|
|---|---|---|
|
|
243
158
|
| onScroll | (e: Event) => void | Fires when the list has been scrolled |
|
|
244
|
-
| onScrollEnd | (e: Event) => void | Fires when the list has completed scrolling. |
|
|
245
|
-
|
|
159
|
+
| onScrollEnd | (e: Event) => void | Fires when the list has completed scrolling. |
|