Pop up

Se composant est repris de bootstrap vue.

Aperçu

Ce composant est un pop-up qui permet de visualiser du contenu. Il peut être appelé par la machine ou par l'utlisateur. Il peut aussi être utilisé dans les composants développés comme le quiz. Vous pouvez donc à n'importe quel endroit de votre page ou de votre autre composant appeler ce POP-UP pour afficher les messages de type: information, avertissement, rétroaction, personnalisé.

Comportement

Le FCAD offre un composant POP-UP pour afficher une boite de dialogue à l'utilisateur. Ce composant est paramètré pour générer 4 types de boite de dialogue.

Vous devez utiliser le bus pour appeler l'ouverture du pop-up. Voici comment faire:

Emettre l'événement open-popup.
Passer en "argument" l'objet POP-UP à générer.

<script>
export default {
  //...
  methods: {
    openPopup(data) {
      this.$bus.$emit("open-popup", data);
    }
  },
};
</script>

Dans la section <template/> de votre page ou de votre composant, vous pouvez maintenant faire afficher le POP-UP, par l'appel de votre méthode sur le clique d'un bouton par exemple.

<template>
  <div>
    <app-base-button @click="openPopup(myPopupExemple1)"
      >Information
    </app-base-button>
  </div>
</template>

Paramètre

Le pop-up doit recevoir l'information à afficher d'object. Voici le contenu que doit avoir l'objet pop-up:

Propriété	Type	Description	valeur	Required
type	String	défini le type de pop-up à être générer	`popup-info`, `popup-avert`, `popup-retro`, `popup-custom`	true
value	Object	défini le contenu à générer dans le pop-up	`title`, `text_n`, `hypertext`, `hypertext_n`, `audio_n`, `video_n`, `link_n`, `image_n`, `cb_$open`,`cb_$close`, `cb_$cancel`, `cb_$confirm`,`$bvArgs`*, NOTES: `n` étant un entier de 1 à infini Doit être uniquement utiliser avec le Pop-up Custom Doit être utilisé iniquement avec les pop-up * liste de proprietés Boostrap-vue à passer	true

Voici comment définir l'objet à générer :

<script>
export default {
  //...
  data() {
    return {
      //...
      myPopupExemple1: {
        type: "popup-info",
        value: {text_1:"voici une information de pop-up à afficher"},
      },
    };
  },
};
</script>

Voici le tableau de tous les paramètres possible pour les pop-ups :

Propriété	Type	Description	Usage	Required
title	String	Le titre que doit afficher le POP-UP dans l'entête exemple : information	title: 'information'	optionnelle
text_n `n` étant un entier de 1 à infini	String	un contenu textuel que doit afficher le POP-UP.	text_1:"Hello world"	optionnelle
image_n `n` étant un entier de 1 à infini	Object	une image à faire afficher dans le POP-UP avec une source et un alt	image_1:{path:'img/mon_image.png', label:'nom de mon image'} Note: les clés `path` et `label` sont obligatoire.	optionnelle
audio_n `n` étant un entier de 1 à infini	String	un élément audio à faire afficher dans le POP-UP.	audio_1:'audio/mon_image.png'	optionnelle
video_n `n` étant un entier de 1 à infini	String	un élément vidéo à faire afficher dans le POP-UP.	video_1:'video/mon_image.png'	optionnelle
link_n `n` étant un entier de 1 à infini	Object	un lien à faire afficher dans le POP-UP, avec une source et un libélé	link_1:{ ref:'https://FCADdocumentation.netlify.app/guide/', label:'libélé de mon lien' } Note: les clés `ref` et `label` sont obligatoire.	optionnelle
hypertext_n `n` étant un entier de 1 à infini	String	un contenu html à faire afficher dans le POP-UP.	hypertext_1:'voici un texte avec du <strong>html</strong> à afficher'
cb_$open	Function	une fonction de callback à exécuter lorsque le POP-UP sera ouvert	cb_$open:foo()	optionnelle
cb_$close	Function	une fonction de callback à exécuter lorsque le POP-UP sera fermé	cb_$close:foo()	optionnelle
cb_$cancel	Function	une fonction de callback à exécuter lorsque le button d'annulation sera appuyé	cb_$cancel:foo()	optionnelle
cb_$confirm	Function	une fonction de callback à exécuter lorsque le button de confirmation sera appuyé	cb_$confirm:foo()	optionnelle

Style

Vous ne pouvez pas ajouter des classes supplémentaires.

Prennez note que le pop-up en version EL et EL+ on la class full et lte. Les styles sont donc indépendant pour tout les types de pop-up.

Accessibilité

Pour l'instant aucune action n'a été fait pour l'accessibilité.

# Pop up

# Aperçu

# Comportement

# Paramètre