HeaderStandard
L'entête d'un écran : un retour ou la marque, le titre ou un contenu libre, une action facultative. HeaderLarge en est la version pour les pages de détail, avec sous-titre, marque et onglets.
Utilisation
import { HeaderStandard, HeaderLarge } from "@monstera/ui"Cartes
Cartes
Réglages de la carte
Titre, action, retour
Titre seul, titre avec action, retour avec action. Les trois sont en variant page. La variante ecran, pour un écran ouvert par-dessus, réduit le titre d'un cran et passe les deux boutons en ghost.
Marque
logo pose la marque de l'application dans la case du retour, sans titre. L'action s'y fait discrète, en ghost, comme la croix qui quitte un parcours.
Contenu libre
Les enfants prennent la place du titre, entre le retour et l'action : ici une recherche et son filtre.
Crédit renouvelable
Contrat 4521 8890 12
HeaderLarge
La barre ne garde que ses deux boutons. Le titre descend en dessous avec sa marque et sa référence, puis viennent les onglets de la page, passés en enfants. Au repos, l'entête est transparent.
Crédit renouvelable
Contrat 4521 8890 12
HeaderLarge défilé
scrolled passe l'entête en verre, pour le contenu qui défile dessous. C'est l'app qui le pose, selon la position de défilement.
Un seul h1 par écran
Le titre de HeaderStandard est le h1 de l'écran. Il ne s'en pose donc pas un second dans le contenu : les sections en dessous commencent au h2. Un entête de marque ou à contenu libre n'a pas de titre : le h1 vient alors du contenu de l'écran.
Quand passer à HeaderLarge
Dès que la page a un nom long, une référence ou des onglets : une barre d'une ligne ne peut pas les porter. logo est un emplacement, un carré navy de 40 px, et la marque qu'on y pose appartient à l'application, pas au kit.
API
HeaderStandard
Prop
Type
HeaderLarge
Prop
Type