Utilisation

Un composable pour afficher des notifications de toast dans votre application.

Utilisation

Utilisez le composable useToast auto-importé pour afficher les notifications Toast.

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

function showToast() {
  toast.add({
    title: 'New message',
    description: 'You have a new message from Benjamin.',
    actions: [{
      icon: 'i-lucide-reply',
      label: 'Reply',
      color: 'neutral',
      variant: 'outline',
      onClick: () => {
        toast.add({ title: 'Reply sent', color: 'success' })
      }
    }]
  })
}
</script>

<template>
  <UButton label="Show toast" @click="showToast" />
</template>
  • Le composable useToast utilise useState de Nuxt pour gérer l'état du toast, assurant ainsi la réactivité de votre application.
  • Un maximum de 5 toasts sont affichés à la fois par défaut. Lorsque vous ajoutez un nouveau toast qui dépasserait cette limite, le plus ancien est automatiquement supprimé. Changez-le avec le prop toaster.max sur le composant App.
  • Lors de la suppression d'un toast, il y a un délai de 200ms avant qu 'il ne soit effectivement retiré de l'état, ce qui permet des animations de sortie.
Assurez-vous d'envelopper votre application avec le composant App qui utilise notre composant Toaster qui utilise le composant ToastProvider de Reka UI.
Découvrez comment personnaliser l'apparence et le comportement des toasts dans la documentation du composant Toast.

api

useToast()x{lang="ts-type"}

Le composable useToast fournit des méthodes pour gérer les notifications de toast globalement.

ajouter ()

add(toast: Partial<Toast>): Toastx{lang="ts-type"}

Ajoute une nouvelle notification de toast.

Paramètres

toast
Partial<Toast> required
Un objet partiel Toast avec les propriétés suivantes:

**Retourne: ** L'objet Toast complet qui a été ajouté.

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

function showToast() {
  toast.add({
    title: 'Success',
    description: 'Your action was completed successfully.',
    color: 'success'
  })
}
</script>

update ()

update(id: string | number, toast: Omit<Partial<Toast>, 'id'>): voidx{lang="ts-type"}

Mise à jour d'une notification existante.

Paramètres

id
string | number required
L'identifiant unique du toast à mettre à jour.
toast
Omit<Partial<Toast>, 'id'> required
Un objet partiel Toast avec les propriétés à mettre à jour. Le id ne peut pas être modifié, le toast est rouvert et duration est réinitialisé sauf si vous le passez à nouveau.
<script setup lang="ts">
const toast = useToast()

function updateToast(id: string | number) {
  toast.update(id, {
    title: 'Updated Toast',
    description: 'This toast has been updated.'
  })
}
</script>

remove ()

remove(id: string | number): voidx{lang="ts-type"}

Supprimer une notification de toast.

Paramètres

id
string | number required
L'identifiant unique du toast à enlever.
<script setup lang="ts">
const toast = useToast()

function removeToast(id: string | number) {
  toast.remove(id)
}
</script>

clear (résolu)

clear(): voidx{lang="ts-type"}

Supprime toutes les notifications de toast.

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

function clearAllToasts() {
  toast.clear()
}
</script>

toasts

toasts: Ref<Toast[]>

Un tableau réactif contenant toutes les notifications de toast actuelles.

<script setup lang="ts">
const { toasts } = useToast()
</script>

<template>
  <div>
    <pre>{{ toasts }}</pre>
  </div>
</template>

useScrollShadow

A composable to apply scroll shadow effects on any scrollable element.

useTour

A composable to build guided tours by re-anchoring a single Popover across steps.