Composants
AppFooter
Composant de pied de page avec copyright et liens légaux
Composant de pied de page simple affichant les informations de copyright et le lien vers les mentions légales.
Usage
Basic
Utilisez le composant AppFooter dans un layout :
<template>
<div class="flex flex-col min-h-screen">
<AppHeader />
<main class="flex-grow">
<slot />
</main>
<AppFooter />
</div>
</template>
Avec layout complet
<template>
<div class="flex flex-col min-h-screen">
<AppHeader />
<main class="flex-grow container mx-auto py-8">
<slot />
</main>
<AppFooter />
</div>
</template>
API
Props
Ce composant n'accepte aucune prop.
Events
Ce composant n'émet aucun événement.
Slots
Ce composant n'expose aucun slot.
Exemples
Exemple 1 : Layout standard
<template>
<div class="flex flex-col min-h-screen">
<AppHeader />
<main class="flex-grow">
<slot />
</main>
<AppFooter />
</div>
</template>
Exemple 2 : Footer toujours en bas
Le composant utilise mt-auto pour être poussé en bas de la page. Assurez-vous que le parent utilise flex flex-col min-h-screen :
<template>
<div class="flex flex-col min-h-screen">
<AppHeader />
<main class="flex-grow">
<!-- Contenu -->
</main>
<AppFooter />
</div>
</template>
Notes
Le composant affiche le copyright avec l'année 2024 et un lien vers /mentions-legales. Le style utilise un fond noir avec texte blanc pour un contraste fort.