Navigation et superpositions

Ce que tu vas apprendre

• Construire un menu de navigation à partir d'un tableau.
• Ouvrir une fenêtre modale et un menu déroulant.
• Afficher une notification avec useToast.

Un menu de navigation

Un menu se décrit avec des données, pas avec du HTML. Tu fournis un tableau d'éléments, UNavigationMenu s'occupe du reste.

<script setup lang="ts">
const items = [
  { label: 'Accueil', icon: 'i-lucide-house', to: '/' },
  { label: 'Recettes', icon: 'i-lucide-utensils', to: '/recettes' },
  { label: 'À propos', to: '/a-propos' }
]
</script>

<template>
  <UNavigationMenu :items="items" />
</template>

Chaque élément a un label, un to et, au choix, une icon. Le lien de la page courante est mis en évidence.

La prop orientation vaut horizontal par défaut. Avec vertical, le menu devient une colonne, utile dans un menu latéral.

Une fenêtre modale

Une modale est une fenêtre qui passe devant la page et demande une réponse avant de continuer. Voici UModal :

<UModal title="Supprimer la recette" description="Cette action est définitive.">
  <UButton label="Supprimer" color="error" />

  <template #body>
    <p>Tu veux vraiment supprimer « Tarte aux pommes » ?</p>
  </template>
</UModal>

Le contenu par défaut, ici le bouton, sert de déclencheur : un clic l'ouvre. title et description remplissent l'en-tête. Le slot #body contient le corps.

Un pied de page s'ajoute avec #footer, qui reçoit une fonction close pour fermer :

<template #footer="{ close }">
  <UButton label="Annuler" variant="outline" @click="close" />
</template>

Piloter l'ouverture

Pour ouvrir la modale depuis ton code, lie sa prop open à une variable avec v-model:open :

<script setup lang="ts">
const ouverte = ref(false)
</script>

<template>
  <UButton label="Nouvelle recette" @click="ouverte = true" />
  <UModal v-model:open="ouverte" title="Nouvelle recette">
    <template #body>
      <p>Le formulaire viendra ici.</p>
    </template>
  </UModal>
</template>

ouverte vaut true quand la fenêtre est visible. Tu peux y glisser le formulaire du cours précédent.

Un menu déroulant

UDropdownMenu affiche une liste d'actions au clic sur un élément. Ses items forment un tableau de groupes, chaque groupe étant lui-même un tableau.

<script setup lang="ts">
const items = [
  [
    { label: 'Modifier', icon: 'i-lucide-pencil' },
    { label: 'Dupliquer', icon: 'i-lucide-copy' }
  ],
  [
    { label: 'Supprimer', icon: 'i-lucide-trash', color: 'error' as const }
  ]
]
</script>

<template>
  <UDropdownMenu :items="items">
    <UButton label="Actions" trailing-icon="i-lucide-chevron-down" />
  </UDropdownMenu>
</template>

Un trait sépare les groupes. Le bouton placé dans le composant sert de déclencheur. Pour réagir à un choix, ajoute onSelect à l'élément, une fonction appelée au clic.

Les notifications

Un toast est un court message qui apparaît dans un coin de l'écran puis disparaît. Il s'appelle avec useToast() :

<script setup lang="ts">
const toast = useToast()

function enregistrer() {
  toast.add({
    title: 'Recette enregistrée',
    description: 'Elle apparaît dans ta liste.',
    color: 'success',
    icon: 'i-lucide-circle-check'
  })
}
</script>

Le toast reste affiché 5 secondes par défaut. La propriété duration change ce délai, et 0 le laisse affiché jusqu'à la fermeture.

Tout relier

Une suite classique : l'utilisateur ouvre la modale, valide le formulaire, la modale se ferme et un toast confirme. Dans la fonction appelée par @submit, tu mets ouverte.value = false puis toast.add(...).

À retenir

• UNavigationMenu se construit à partir d'un tableau items (label, to, icon).
• UModal : title, description, slots #body et #footer, ouverture pilotée par v-model:open.
• UDropdownMenu reçoit des items en tableau de groupes ; onSelect réagit au choix.
• useToast().add({...}) affiche une notification, 5 secondes par défaut.
• Toasts et modales exigent <UApp>.