luxInfiniteScroll v18 - IHK-GfI/lux-components GitHub Wiki

luxInfiniteScroll

Overview / API

Allgemein

Name Beschreibung
import LuxDirectivesModule
selector luxInfiniteScroll

@Input

Name Typ Beschreibung
luxScrollPercent number Prozentzahl in der Scrollbar, ab der das luxScrolled-Event emitted wird.
luxImmediateCallback boolean Einstellung ob bei Initiierung ein luxScrolled-Event abgegeben wird.
luxIsLoading boolean Teilt der Komponente mit, ob gerade Daten geladen werden.
luxScrolled EventEmitter <void> Event, wenn das scrollende Element neue Daten bereitstellen sollte.

Beispiele

1. Mit LUX-List

Beispielbild 01

Ts

list: any[] = [];

constructor() {
  for(let i = 0; i < 10; i++) {
    this.list.push(`Item #${i}`);
  }
}

onScroll() {
  const startIndex = this.list.length;
  for(let i = 0; i < 10; i++) {
    this.list.push(`Item #${ startIndex + i}`);
  }
}

Html

<div style="height: 500px">
  <lux-list
    class="lux-flex lux-flex-col"
    luxInfiniteScroll
    [luxScrollPercent]="80"
    [luxImmediateCallback]="true"
    (luxScrolled)="onScroll()"
  >
    <lux-list-item
      [luxTitle]="item"
      *ngFor="let item of list"
      class="lux-min-width-80"
    >
      <lux-list-item-icon>
        <lux-icon luxIconName="lux-programming-module-puzzle"></lux-icon>
      </lux-list-item-icon>
      <lux-list-item-content class="lux-min-width-80">
        Ich bin das {{ item }}.
      </lux-list-item-content>
    </lux-list-item>
  </lux-list>
</div>

2. Mit Div-Elementen

Beispielbild 02

Ts

  list: any[] = [];

  constructor() {
    for(let i = 0; i < 10; i++) {
      this.list.push(`Item #${i}`);
    }
  }

  onScroll() {
    const startIndex = this.list.length;
    for(let i = 0; i < 10; i++) {
      this.list.push(`Item #${ startIndex + i}`);
    }
  }

Html

<div
  style="height: 100%; width: 100%; overflow-y: auto"
  luxInfiniteScroll
  [luxScrollPercent]="80"
  [luxImmediateCallback]="false"
  (luxScrolled)="onScroll()"
>
  <div style="min-height: 100px; min-width: 400px" *ngFor="let item of list">
    {{ item }}
  </div>
</div>
⚠️ **GitHub.com Fallback** ⚠️