Erste Schritte

Direktiven zum Ausblenden und Einblenden von Ionic-Headern beim Scrollen.

Installation

npm install @rdlabo/ionic-angular-scroll-header

Importieren Sie das CSS der Direktiven global, beispielsweise in styles.css:

@import '@rdlabo/ionic-angular-scroll-header/css/scroll-header.directive.css';

Beim virtuellen Scrollen mit CDK legen Sie außerdem einen begrenzten Viewport fest:

cdk-virtual-scroll-viewport {
  width: 100%;
  height: 100%;
  .cdk-virtual-scroll-content-wrapper {
    padding-top: inherit;
  }
}

Erster Erfolg: IonContent

Erstellen Sie eine Seite mit ausreichend scrollbaren Zeilen und einem Header, der den Viewport verlassen kann. Das vollständige Beispiel finden Sie unter IonContent.

Scrollen Sie nach unten: Der Inhaltsheader wird ausgeblendet. Scrollen Sie nach oben: Er erscheint wieder. Safe-Area-Header und dauerhaft sichtbare native Header werden unter Sicherer Bereich beschrieben. CDK-Viewports verwenden Virtuelles Scrollen.

Nach Header-Layout auswählen