gebruikToast
Een compositie om toastmeldingen in uw app weer te geven.
Gebruik
Gebruik de automatisch geïmporteerde useToast composable om Toast meldingen weer te geven.
<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>
- De
useToastcomposable gebruikt deuseStatevan Nuxt om de toaststatus te beheren, waardoor reactiviteit in uw applicatie wordt gegarandeerd. - Er worden standaard maximaal 5 toasts per keer weergegeven. Bij het toevoegen van een nieuwe toast die deze limiet zou overschrijden, wordt de oudste toast automatisch verwijderd.
Verander het met de
toaster.maxprop op deAppcomponent. - Bij het verwijderen van een toast is er een vertraging van 200 ms voordat deze daadwerkelijk uit de staat wordt verwijderd, waardoor exit-animaties mogelijk zijn.
Zorg ervoor dat u uw app omhult met de
App -component die onze Toaster -component gebruikt die de ToastProvider -component van Reka UI gebruikt.API
useToast()
De useToast composable biedt methoden om toastmeldingen wereldwijd te beheren.
toevoegen ()
add(toast: Partial<Toast>): Toast
Voegt een nieuwe toastmelding toe.
Parameters
toast
Partial<Toast> required
Een gedeeltelijk
Toast object met de volgende eigenschappen:id
string | number
Een unieke identificatie voor de toast. Als deze niet wordt verstrekt, wordt een unieke id gegenereerd. Het hergebruiken van een bestaande id wordt samengevoegd met die toast in plaats van een nieuwe toe te voegen.
open
boolean
Of de toast open is. Standaard
true.title
string | VNode | (() => VNode)
De titel die in de toast wordt weergegeven.
description
string | VNode | (() => VNode)
De beschrijving die in de toast wordt weergegeven.
icon
string
Het pictogram dat in de toast wordt weergegeven.
avatar
AvatarProps
De avatar die in de toast wordt weergegeven. Zie Avatar.
color
string
De kleur van de toast. Standaard
primary.orientation
'horizontal' | 'vertical'
De oriëntatie tussen de inhoud en de acties. Standaard
vertical.close
boolean | Omit<ButtonProps, LinkPropsKeys>
Pas of verberg de sluitknop (met
false-waarde). Standaard true.closeIcon
string
Het pictogram dat wordt weergegeven in de knop Sluiten.
actions
ButtonProps[]
De acties die in de toast worden weergegeven. Zie Button.
progress
boolean | Pick<ProgressProps, 'color' | 'ui'>
Pas de voortgangsbalk aan of verberg deze (met
false-waarde). Standaard true.duration
number
De duur in milliseconden voordat de toast automatisch wordt gesloten. Standaard ingesteld op
5000. Stel in op 0 om de toast open te houden totdat deze handmatig wordt gesloten.
Kan ook globaal worden ingesteld op de App component.onClick
(toast: Toast) => void
Een callback-functie die wordt aangeroepen wanneer op de toast wordt geklikt.
onUpdateOpen
(open: boolean) => void
Een callback-functie die wordt aangeroepen wanneer de open status van de toast verandert. Handig om een actie uit te voeren wanneer de toast sluit (verlopen of afgewezen).
type
'foreground' | 'background'
Hoe ondersteunende technologieën de toast aankondigen. Gebruik
background voor toasts die niet het resultaat zijn van een directe gebruikersactie.as
any
Het element of onderdeel dat de toast weergeeft als. Standaard
li.**Returns: ** Het complete Toast object dat is toegevoegd.
<script setup lang="ts">
const toast = useToast()
function showToast() {
toast.add({
title: 'Success',
description: 'Your action was completed successfully.',
color: 'success'
})
}
</script>
bijwerken ()
update(id: string | number, toast: Omit<Partial<Toast>, 'id'>): void
Werkt een bestaande toastmelding bij.
Parameters
id
string | number required
De unieke identificatie van de toast die moet worden bijgewerkt.
toast
Omit<Partial<Toast>, 'id'> required
Een gedeeltelijk
Toast-object met de eigenschappen die moeten worden bijgewerkt. De id kan niet worden gewijzigd, de toast wordt heropend en duration wordt gereset tenzij u deze opnieuw doorgeeft.<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>
verwijderen ()
remove(id: string | number): void
Verwijdert een toastmelding.
Parameters
id
string | number required
De unieke identificatie van de te verwijderen toast.
<script setup lang="ts">
const toast = useToast()
function removeToast(id: string | number) {
toast.remove(id)
}
</script>
helder ()
clear(): void
Verwijdert alle toastmeldingen.
<script setup lang="ts">
const toast = useToast()
function clearAllToasts() {
toast.clear()
}
</script>
toasts
toasts: Ref<Toast[]>
Een reactieve array met alle huidige toastmeldingen.
<script setup lang="ts">
const { toasts } = useToast()
</script>
<template>
<div>
<pre>{{ toasts }}</pre>
</div>
</template>