Branch Buttons

Composant qui génère des boutons d'embranchment dans une page.

Aperçu

le composant affiche des boutons ou cartes clicables dans la page. Chaque element est accompagné d'un affichage de l'état de progression dans la branche.

Référence du composant

AppCompBranchButtons<app-comp-branch-buttons/>

Comportement

Le composant génère des boutons pour chaque branch disponible dans l'activité. Il crée un lien vers la première page de chaque groupe et et met à jour la progression selon l'avancement de l'apprenant dans le groupe.

Le composant affiche un message d'érreur, lorsque les données passées en reférence, durant la phase de production, ne sont pas valides.

💡 Note

En cas d' erreur, pretez attention au message(s) affiché(s) par le composant dans la console du navigateur et dans la page. Cela vous permettra de savoir ce qui doit être corrigé.

Paramètre

Props

Propriété	Type	Description	valeur par défaut	valeur accepté
customButtons (optionnelle)	Array	Tableau d'objets contenant les informations pour chaque bouton d'embranchement.	null	Un Array d'Object (name, brchName) Exemple pour une page avec 2 embranchments chaque objet bouton sera defini comme suit: [ { name: 'bouton_A02_P01_E01', brchName: 'P02_E01' }, { name: 'bouton_A02_P01_E02',brchName: 'P02_E02' } ]
cards (optionnelle)	Array	Tableau d'objets contenant les informations pour chaque bouton d'embranchement. Chaque bouton est presenté sous forme d'une carte	null	Un Array d'Object (imgFile, title, text, brchName, btnTitle) Exemple chaque carte d'embranchments sera un objet défini de la forme ci-dessous: [ { imgFile: 'imgCarte.jpg', (l'image doit se trouver dans le dossier src/assets/img du projet) title: 'Titre embranchment', text: 'Ceci est un embranchment factice, affiché sous la forme de carte.' brchName: 'P02_E01' btnTitle: '' } ]

Slots

Un template custom est disponible pour habiller chaque bouton en faisant reférence au nom de la branch qui le lie. Ceci n'est applicable qu'avec l'utilisation de la propriété customButtons

Exemple:

<app-comp-branch-buttons :custom-buttons="buttonData">
  <template #bouton_A02_P01_E01>
      <h1>Peu</h1>
    </template>
    <template #bouton_A02_P01_E02>
      <h1>Peut être ici le titre d'une page</h1>
    </template>
</app-comp-branch-buttons>

Si le composant est appelée sans prop, les boutons par défaut seront générés.

🚩 Important

Ce composant n'est disponible que dans le mode EL+.

Style

Accessibilité

une variable imgAlt est disponible sur chaque objet, pour définir la valeur de l'attribut alt de l'image de la carte.