Flip card

Ce composant sert à présenter du contenu interactif sous forme d'une carte retournable.

Aperçu

Le composant propose un rendu pour l'avant de la carte et un rendu pour l’arrière de la carte C'est un élément interactif pour afficher du contenu de manière dynamique. Vous pouvez l'utiliser pour développer un quiz comme bon vous semble.

Référence du composant

AppBaseFlipCard<app-base-flip-card/>

Comportement

De base, le composant émet l'évènement click au clique de l'utilisateur et retourne l'élément cliqué. Il ajoute ou retire la classe flip (qui crée l'effet de toggle).

👁️ Attention!

Il est important de ne pas modifier les classes, à moins de modifier les fichiers sass.

Notez que le composant ne réagit que à événement de clique, le hover n'est pas pris en compte.

💡 Note

Pour changer l'animation du composant utiliser la classe flip-card.

Paramètre

Voici les éléments paramétrables du flip card.

Props

Propriété	Type	Description	valeur par défaut
role	String	Pour l'accessibilité, afin que les gens puissent atteindre l'élément	button
aria-pressed	Boolean	Pour l'accessibilité, afin que les gens puissent déclancher l'action avec le clavier	false
@click	function	Déclenche la fonction pour émettre le clique, retourne l'élément cliqué et fait réagis la classe	fnClick

Style

.flip [Class] - permet de modifier l'animation du composant

👁️ Attention!

Toutes les classes présentes sont importantes pour la structure, à moins de les modifier dans le fichier sass flipCard.scss.

Accessibilité

Le Flip card de base vient avec un niveau d'accessibilité de base. Svp lors de son usage n'oubliez pas d'utiliser ces paramètres pour respecter le critère du WCAG.

Propriété	Type	Description et utilisation	valeur par défaut
role	String	Pour l'accessibilité, afin que les gens puissent atteindre l'élément	button
aria-pressed	Boolean	Déclare que l'élément est un bouton à bascule	true