Usos

Un composable para mostrar notificaciones de tostadas en su aplicación.

xph0000xUso

Utilice el componente useToast de importación automática para mostrar las notificaciones 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>

El componente useToast utiliza useState de Nuxt para gestionar el estado de tostado, lo que garantiza la reactividad en toda la aplicación.

  • Un máximo de 5 tostadas se muestran a la vez de forma predeterminada. Al agregar una nueva tostada que exceda este límite, la tostada más antigua se elimina automáticamente. Cámbiela con el prop toaster.max en el componente App.
  • Al eliminar un brindis, hay un retraso de 200 ms antes de que realmente se elimine del estado, lo que permite animaciones de salida.
Asegúrese de envolver su aplicación con el componente App que utiliza nuestro componente Toaster que utiliza el componente ToastProvider de Reka UI.
Aprenda a personalizar la apariencia y el comportamiento de las tostadas en la documentación del componente Toast.

API (Edición española)

useToast()xx{lang="ts-type"} (Edición española)

El composable useToast proporciona métodos para administrar notificaciones de tostadas a nivel mundial.

add ()

add(toast: Partial<Toast>): Toastxx{lang="ts-type"} (Edición española)

Añade una nueva notificación de brindis.

Parámetros

toast
Partial<Toast> required
Un objeto Toast parcial con las siguientes propiedades:

**Devuelve: ** El objeto Toast completo que se ha añadido.

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

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

actualización ()

update(id: string | number, toast: Omit<Partial<Toast>, 'id'>): voidxx{lang="ts-type"} (Edición española)

Actualiza una notificación de tostadas existente.

Parámetros

id
string | number required
El identificador único de la tostada para actualizar.
toast
Omit<Partial<Toast>, 'id'> required
El objeto id no se puede cambiar, el tostado se vuelve a abrir y duration se restablece a menos que se pase de nuevo.
<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 ()(Acción)

remove(id: string | number): voidx{lang="ts-type"} (Edición española)

Elimina la notificación de tostadas.

Parameteros

id
string | number required
El identificador único de la tostada a eliminar.
<script setup lang="ts">
const toast = useToast()

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

clear (en inglés)

clear(): voidx{lang="ts-type"} (Edición española)

Elimina todas las notificaciones de tostadas.

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

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

tostados

toasts: Ref<Toast[]>x{lang="ts-type"} (Edición española)

Una matriz reactiva que contiene todas las notificaciones de tostadas actuales.

<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.