@searchstax-inc/searchstudio-ux-angular 1.1.7 → 1.1.8
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 +63 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -223,6 +223,15 @@ example of results widget initialization with minimum options
|
|
|
223
223
|
></app-searchstax-results>
|
|
224
224
|
```
|
|
225
225
|
|
|
226
|
+
example of results widget initialization with minimum options and infinite scroll behavior
|
|
227
|
+
```
|
|
228
|
+
<app-searchstax-results
|
|
229
|
+
[afterLinkClick]="afterLinkClick"
|
|
230
|
+
[resultsPerPage]="3"
|
|
231
|
+
[renderMethod]="'infiniteScroll'"
|
|
232
|
+
></app-searchstax-results>
|
|
233
|
+
```
|
|
234
|
+
|
|
226
235
|
example of result widget initialization with template override
|
|
227
236
|
```
|
|
228
237
|
<app-searchstax-results
|
|
@@ -345,6 +354,60 @@ example of pagination widget initialization with various options
|
|
|
345
354
|
</app-searchstax-search-pagination>
|
|
346
355
|
```
|
|
347
356
|
|
|
357
|
+
example of pagination widget with infinite scroll
|
|
358
|
+
```
|
|
359
|
+
<app-searchstax-search-pagination [templateOverride]="paginationTemplate"
|
|
360
|
+
[infiniteScrollTemplateOverride]="infiniteScrollTemplate">
|
|
361
|
+
<ng-template
|
|
362
|
+
#infiniteScrollTemplate
|
|
363
|
+
let-paginationData="paginationData"
|
|
364
|
+
let-nextPage="nextPage"
|
|
365
|
+
let-context="context"
|
|
366
|
+
>
|
|
367
|
+
<div class="searchstax-pagination-container">
|
|
368
|
+
<div class="searchstax-pagination-content">
|
|
369
|
+
<a
|
|
370
|
+
class="searchstax-pagination-load-more"
|
|
371
|
+
(click)="nextPage($event, context)"
|
|
372
|
+
>
|
|
373
|
+
Load More
|
|
374
|
+
</a>
|
|
375
|
+
</div>
|
|
376
|
+
</div>
|
|
377
|
+
</ng-template>
|
|
378
|
+
|
|
379
|
+
<ng-template
|
|
380
|
+
#paginationTemplate
|
|
381
|
+
let-paginationData="paginationData"
|
|
382
|
+
let-previousPage="previousPage"
|
|
383
|
+
let-nextPage="nextPage"
|
|
384
|
+
let-context="context"
|
|
385
|
+
>
|
|
386
|
+
<div class="searchstax-pagination-container">
|
|
387
|
+
<div class="searchstax-pagination-content">
|
|
388
|
+
<a
|
|
389
|
+
class="searchstax-pagination-previous"
|
|
390
|
+
(click)="previousPage($event, context)"
|
|
391
|
+
id="searchstax-pagination-previous"
|
|
392
|
+
>
|
|
393
|
+
< Previous
|
|
394
|
+
</a>
|
|
395
|
+
<div class="searchstax-pagination-details">
|
|
396
|
+
{{ paginationData?.startResultIndex }} - {{ paginationData?.endResultIndex }} of
|
|
397
|
+
{{ paginationData?.totalResults }}
|
|
398
|
+
</div>
|
|
399
|
+
<a
|
|
400
|
+
class="searchstax-pagination-next"
|
|
401
|
+
(click)="nextPage($event, context)"
|
|
402
|
+
id="searchstax-pagination-next"
|
|
403
|
+
>Next ></a
|
|
404
|
+
>
|
|
405
|
+
</div>
|
|
406
|
+
</div>
|
|
407
|
+
</ng-template>
|
|
408
|
+
</app-searchstax-search-pagination>
|
|
409
|
+
```
|
|
410
|
+
|
|
348
411
|
### Facets Widget ###
|
|
349
412
|
|
|
350
413
|
example of facets widget initialization with minimum options
|