|
| 1 | +## 🌟 Introduction |
| 2 | + |
| 3 | +Le composant `DsfrCallout` est un composant Vue.js qui permet de créer des encadrés de mise en avant avec un titre, un contenu, une icône optionnelle, et un bouton configurable. Il est conçu pour s'intégrer harmonieusement dans les projets utilisant le Design System Français (DSFR), tout en offrant une grande flexibilité grâce à la personnalisation des éléments visuels. |
| 4 | + |
| 5 | +🏅 La documentation sur la mise en avant sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/mise-en-avant) |
| 6 | + |
| 7 | +<VIcon name="vi-file-type-storybook" /> La story sur la mise en avant sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfrcallout--docs) |
| 8 | + |
| 9 | +## 📐 Structure |
| 10 | + |
| 11 | +Le composant `DsfrCallout` s'utilise pour afficher un message ou une information importante dans un encadré visuellement distinct, avec un titre, une icône, du contenu textuel, et éventuellement un bouton d'action. Chaque partie de l'encadré peut être personnalisée via les propriétés du composant. |
| 12 | + |
| 13 | +## 🛠️ Props |
| 14 | + |
| 15 | +Voici les différentes propriétés que vous pouvez utiliser avec ce composant : |
| 16 | + |
| 17 | +| Prop | Type | Défaut | Description | |
| 18 | +|-----------|------------------------|---------------|---------------------------------------------------------------------------------------------------------------------------------------------------------| |
| 19 | +| `button` | `object \| undefined` | `undefined` | Configuration du bouton d'action. Si défini, le bouton s'affichera sous le texte principal. | |
| 20 | +| `title` | `string \| undefined` | `undefined` | Titre de l'encadré, affiché dans un élément HTML déterminé par `titleTag`. | |
| 21 | +| `titleTag`| `string` | `'h3'` | Balise HTML utilisée pour le titre (`h3` par défaut). | |
| 22 | +| `icon` | `string \| object \| undefined` | `undefined` | Icône affichée à gauche du titre. Peut être une chaîne pour une icône DSFR, un objet pour un composant `VIcon`, ou `undefined` si aucune icône n'est nécessaire. | |
| 23 | +| `content` | `string` | **Obligatoire** | Texte principal de l'encadré, généralement une description ou un message important. | |
| 24 | + |
| 25 | +## 📡 Événements |
| 26 | + |
| 27 | +Ce composant ne déclenche pas d'événements personnalisés. |
| 28 | + |
| 29 | +## 🧩 Slots |
| 30 | + |
| 31 | +- `default` : Contenu additionnel à afficher à l'intérieur de l'encadré. Ce slot est intégré dans la structure principale du composant et s'affiche sous le texte principal. |
| 32 | + |
| 33 | + |
| 34 | +::: code-group |
| 35 | + |
| 36 | +<Story data-title="Démo" min-h="200px"> |
| 37 | + <DsfrConsentDemo /> |
| 38 | +</Story> |
| 39 | + |
| 40 | +<<< docs-demo/DsfrConsentDemo.vue [Code de la démo] |
| 41 | + |
| 42 | +<<< DsfrConsent.vue |
| 43 | + |
| 44 | +::: |
| 45 | + |
| 46 | +<script setup lang="ts"> |
| 47 | +import DsfrConsentDemo from './docs-demo/DsfrConsentDemo.vue' |
| 48 | +</script> |
| 49 | + |
| 50 | +## ⚙️ Code source du composant |
0 commit comments