Premiers pas

Directives qui masquent et révèlent les en-têtes Ionic pendant le défilement.

Installation

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

Importez globalement le CSS de la directive, par exemple dans styles.css :

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

Si vous utilisez le défilement virtuel CDK, définissez également un viewport de taille délimitée :

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

Premier résultat : IonContent

Créez une page contenant suffisamment de lignes pour défiler et un en-tête pouvant sortir du viewport. Consultez l’exemple complet dans IonContent.

Faites défiler vers le bas : l’en-tête du contenu disparaît. Faites défiler vers le haut : il réapparaît. Les zones de sécurité et les en-têtes natifs toujours visibles sont décrits dans Zone de sécurité. Les viewports CDK utilisent Défilement virtuel.

Choisir selon la disposition de l’en-tête