Je développe un SPA en Polymère. Ma mise en page principale utilise le app-layout ensemble pour créer une barre d'en-tête et la page scrollable sous - ainsiComment puis-je obtenir un effet de barre d'en-tête imbriqué?
<app-header-layout>
<app-header>
<app-toolbar>
toolbar content ...
</app-toolbar>
</app-header>
<iron-pages ...>
<page1-element></page1-element>
...
<pagen-element></pagen-element>
</iron-pages>
<app-header-layout>
Une de mes pages est un grand calendrier mensuel utilisé pour visualiser un résumé et de rendez-vous, qui, lorsqu'il est utilisé pour la réservation est Je vais avoir une grande quantité d'informations importantes au-dessus des réservations pour le jour sélectionné, si bien que sur les écrans normaux, les dernières semaines du calendrier disparaissent au bas de l'écran et ma page devient défilement.
La, dont la structure de cette <page-element> est comme si
<section class="day">
Information which takes up about 1/3 of the screen
</section>
<section class="calendar header">
<paper-tabs>Tabs for each office</paper-tabs>
<div>Area to allow selection of month and year, with next and previous buttons</div>
<ul id="daysofweek">...</ul>
</section>
<section class="calendar">
Calendar itself in weekly rows
</section>
Ce que je voudrais obtenir sur cette page (se souvenant de la barre d'outils principale application reste statique en haut de l'écran) est
- La section avec class = "day" reste statique en haut de l'écran (sous la barre d'outils principale de l'application)
- La sélection de l'en-tête du calendrier s'effondre lorsque l'utilisateur fait défiler la page jusqu'à la disparition complète, mais si l'utilisation fait défiler juste un peu seulement la ligne "daysofweek" se révèle (ie le modèle de révélation supporté par les effets de défilement dans
<app-header>) - La partie restante de la page, le calendrier lui-même défile de haut en bas tel que la dernière semaine du mois se trouve exactement en bas de la page lorsque l'utilisateur a complètement déroulé
- lorsque la section avec class = "day" n'est pas présente (c'est-à-dire que quelqu'un consulte simplement le calendrier, alors cela s'effondre vers le haut à zéro hauteur, mais le reste de la page agit comme décrit ci-dessus, mais avec la plus grande fenêtre.
J'ai essayé d'utiliser un <app-header-layout> imbriqué, mais qui semblait me laisser juste avec la barre d'outils app, et le fond du calendrier remplir le reste de l'écran et non scrollable. Je cherche donc des conseils sur la façon d'y parvenir, soit en utilisant les éléments polymères, soit en faisant moi-même les css.
MISE À JOUR
essayé d'utiliser paper-scroll-header-panel, mais tout est devenu invisible. Pas idéal pourquoi comme dans les outils de développement de chrome les différents éléments ont été placés au bon endroit sur la page, mais je n'ai pas pu trouver pourquoi
J'ai également essayé de régler l'élément de conteneur de calendrier à overflow-y: scroll, mais je me suis retrouvé avec deux barres de défilement verticales et seulement l'extérieur travaillé (c'est-à-dire le niveau de l'application un). Cette expérience me fait me demander si je devrais essayer de jouer avec scrollTarget sur app-header