Gebraucht

Ein Composable zum Anzeigen von Toastbenachrichtigungen in Ihrer App.

Bearbeiten

Verwenden Sie das automatisch importierte useToast composable, um Toast-Benachrichtigungen anzuzeigen.

<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>
  • Das useToast composable verwendet Nuxts useState, um den Toast-Status zu verwalten und die Reaktivität in Ihrer gesamten Anwendung sicherzustellen.
  • Ein Maximum von 5 Toasts werden standardmäßig gleichzeitig angezeigt. Wenn ein neuer Toast hinzugefügt wird, der dieses Limit überschreitet, wird der älteste Toast automatisch entfernt. Ändern Sie ihn mit der toaster.max-Prop auf der Komponente App.
  • Wenn Sie einen Toast entfernen, gibt es eine Verzögerung von 200 ms, bevor er tatsächlich aus dem Status entfernt wird, was Exit-Animationen ermöglicht.
Stellen Sie sicher, dass Sie Ihre App mit der Komponente App umwickeln, die unsere Komponente Toaster verwendet, die die Komponente [ToastProvider](]() von Reka UI verwendet.
Erfahren Sie, wie Sie das Aussehen und Verhalten von Toasts in der Dokumentation der Toast-Komponente anpassen können.

API (Englisch)

useToast() (nicht)

Das useToast composable bietet Methoden zur globalen Verwaltung von Toast-Benachrichtigungen.

add () Bearbeiten

add(toast: Partial<Toast>): Toast nicht

Fügen Sie eine neue Toast-Benachrichtigung hinzu.

Parameters (englisch)

toast
Partial<Toast> required
Ein partielles Toast-Objekt mit den folgenden Eigenschaften:

**Gibt zurück: ** Das komplette Toast-Objekt, das hinzugefügt wurde.

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

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

update ()(Deutsche Ausgabe)

update(id: string | number, toast: Omit<Partial<Toast>, 'id'>): void (nicht)

Aktualisiert eine vorhandene Toast-Benachrichtigung.

Parameters (englisch)

id
string | number required
Die eindeutige Kennung des zu aktualisierenden Toastes.
toast
Omit<Partial<Toast>, 'id'> required
Das id kann nicht geändert werden, der Toast wird erneut geöffnet, und duration wird zurückgesetzt, wenn Sie es nicht erneut übergeben.
<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 () Bearbeiten

remove(id: string | number): void nicht

Löscht eine Toast-Benachrichtigung.

Parameters Bearbeiten

id
string | number required
Der eindeutige Identifikator des zu entfernenden Toasts.
<script setup lang="ts">
const toast = useToast()

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

clear ()(nicht verfügbar)

clear(): void (englisch)

Löscht alle Toast-Benachrichtigungen.

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

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

toasts (Für Deutschland)

toasts: Ref<Toast[]> (nicht)

Ein reaktives Array mit allen aktuellen Toast-Benachrichtigungen.

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