|
| 1 | +# Retour en haut de page - `DsfrBackToTop` |
| 2 | + |
| 3 | +Bonjour et bienvenue à cette page de documentation incroyablement utile (et légèrement humoristique) pour notre composant `DsfrBackToTop`. Ce composant est votre meilleur ami pour permettre aux utilisateurs de remonter en haut de la page avec style et élégance. Et oui, même dans le monde du code, la classe, ça compte ! |
| 4 | + |
| 5 | +Dans les pages de contenu longues, il est possible de proposer un bouton de retour en haut de page à la fin du contenu. |
| 6 | + |
| 7 | +Le retour en haut de page est constitué des éléments suivants : |
| 8 | + |
| 9 | +- Icône flèche vers le haut ; |
| 10 | +- Libellé “Haut de page” (modifiable par la prop `label`, de type `string`). |
| 11 | + |
| 12 | +Le lien de retour en haut de page se place à la fin du contenu de la page, avant le pied de page. Aligné à gauche par défaut, avec le contenu, il peut aussi être centré ou aligné à droite, grâce à la prop `position` qui peut prendre les valeur `'right'` ou `'left'`. |
| 13 | + |
| 14 | +Si il y a des bloc de poursuite de lecture (liens vers d’autres articles), il est conseillé de placer le retour en haut de page avant ces blocs. |
| 15 | + |
| 16 | +## Aperçu |
| 17 | + |
| 18 | +`DsfrBackToTop` est un composant simple mais chic, permettant d'ajouter un lien de retour en haut de la page dans vos applications Vue. Il intègre un style distinctif et des options de positionnement pour s'adapter parfaitement à votre mise en page. |
| 19 | + |
| 20 | +## Props |
| 21 | + |
| 22 | +Notre composant est assez flexible et comprend les props suivantes : |
| 23 | + |
| 24 | +| Prop | Type | Description | Par Défaut | |
| 25 | +|------------|-----------------------|-------------------------------------------------------|---------------| |
| 26 | +| `label` | `string` (optionnel) | Le texte affiché sur le bouton. | `"Haut de page"` | |
| 27 | +| `position` | `'right' \| 'left'` | La position du bouton (à droite ou à gauche). | `'right'` | |
| 28 | + |
| 29 | +### Détails des Props |
| 30 | + |
| 31 | +- **label**: C'est le texte que l'on voit sur le bouton. Par défaut, il dit « Haut de page », mais vous pouvez le changer pour quelque chose comme « Retour au début » ou « En haut, et ça presse ! », selon votre humeur. |
| 32 | + |
| 33 | +- **position**: Vous préférez que l’icône de la flèche soit à gauche ou à droite ? Pas de souci ! Cette prop vous permet de choisir. C'est un peu comme être dans une pâtisserie française et décider entre un éclair au chocolat et un Paris-Brest. Sauf que là, c'est moins calorique. |
| 34 | + |
| 35 | +::: warning |
| 36 | + |
| 37 | +Le lien de “Haut de page” est une ancre vers un élément dont l’id est "top". |
| 38 | +Afin de le faire fonctionner correctement, il est nécessaire d’ajouter l’attribut id (id="top") sur l’élément le plus haut de la page comme le body (`<body id="top" ...>`) ou les liens d’évitement (`<DsfrSkipLinks ... id="top">`), afin que le focus de navigation soit lui aussi replacé en haut de page. |
| 39 | + |
| 40 | +::: |
| 41 | + |
| 42 | +## Exemple d'Utilisation |
| 43 | + |
| 44 | +Voici un petit exemple pour vous montrer comment utiliser `DsfrBackToTop` dans votre application : |
| 45 | + |
| 46 | +::: code-group |
| 47 | + |
| 48 | +<Story data-title="Démo" min-h="100px"> |
| 49 | + <DsfrBackToTopDemo /> |
| 50 | +</Story> |
| 51 | + |
| 52 | +<<< docs-demo/DsfrBackToTopDemo.vue [Code de la démo] |
| 53 | + |
| 54 | +<<< DsfrBackToTop.vue |
| 55 | +::: |
| 56 | + |
| 57 | +<script setup lang="ts"> |
| 58 | +import DsfrBackToTopDemo from './docs-demo/DsfrBackToTopDemo.vue' |
| 59 | +</script> |
| 60 | + |
| 61 | +Dans cet exemple, notre bouton indique « Retour vers le futur ! » et l’icône se trouve à gauche. Simple, élégant et efficace, comme un croissant bien cuit. |
0 commit comments