Header

Header est conçu pour faciliter l'intégration de header dans vos pages. Celui-ci est muni de code qui l'anime ainsi que de style lui permettant de faire apparaitre un menu “hamburger” à partir d'une certaine largeur.

Comment l'utiliser

Étapes d'installation

Pour installer Header, il suffit d'avoir les fichiers SCSS et JS nécéssaires dans vos dossiers src.

Ensuite, pour avoir un Header, il faut donner un data-component = 'Header' à l'élément désiré (généralement le header).

Il faut également ajouter un élément HTML button avec les classes header__toggle et js-toggle.

Pour que les styles soient bien appliqués, il faut importer les styles du header.

Variants

Les variants permettent d'ajouter des groupes d'options préfaits afin de personaliser l'affichage du composant.

DÉFAUT

Par défault, le header disparait après avoir parcouru 10% de la page et se transforme en menu “hamburger” lorsque la largeur de l'écran est sous 1024px.

Paramètres

Les paramètres permettent d'ajuster des options précises afin de personaliser davantage le comportement du header.

NO-HIDING

Avec le data-no-hiding, les paramètres sont les mêmes que par défaut sauf que le header ne se cachera jamais dans le haut de la page.

SCROLL-LIMIT

Avec le data-scroll-limit, le header se cache après avoir parcouru la valeur rentrée dans le data et mise en pourcentage, contrairement au paramètres par défaut qui est 10%.

INVERT

Avec le data-invert, le comportement du header est inversé. Celui-ci sera caché par défaut et lors d'un scroll celui-ci s'affichera.

Classes d'états

Le composant Header possède plusieurs classes qui reflète son état. Malgré que ces classses ne soient pas appliqués directement sur le header mais plutôt sur la balise HTML, elles affectent directement le header. Voici un exemple de code affectant le header.

Tel que vu plus haut, 5 classes sont peuvent être présente : is-scrollingdown, is-scrolling-up, nav-is-active, is-inverted et header-is-hidden. is-scrollingdown et is-scrolling-up déterminer dans quel sens nous déroulons la page. Lorsque header-is-hidden est présent, le header se cache en remontant dans le haut de la page et laisse quelques pixels vers le bas pour qu'on puisse toujours le voir. is-inverted permet de déterminer le comportement du header. Pour terminer, nav-is-active fait apparaitre le menu lorsque nous avons un menu hamburger en mobile.

Animations

Comment l'utiliser en dehors de domComp

À l'intérieur d'un fichier JavaScript, importez la classe `Header` que vous aurez préalablement intégré à votre projet.

Dans l'exemple ci-dessus, element est égal au HTMLElement qui a l'attribut data-component="Header"