MessageToast
A simple component which displays notifications and can either be dismissed manually or after a given timeout.
Default Component
Dismissing requires a listener for the close
event which then sets the active
attribute to false.
js
const toast = ref({
message: '',
active: false,
title: 'You need to click!'
})
html
<button @click="toast.active = true">Click Me</button>
<message-toast
v-bind="toast"
@close="toast.active = false"
class="!bg-success-100 !text-success-700"
/>
Result
Component That Reacts Both to Timeout And User Interaction
Both the timeout
and close
listeners set the active
attribute to false.
In addition the timeout progress is visualized by a bar activated with show-timeout-progress
to true
.
js
const toast = ref({
message: 'The default timeout is 5 seconds.',
active: false,
title: 'You can click or wait!'
})
html
<button @click="toast.active = true">Click Me</button>
<message-toast
v-bind="toast"
@close="toast.active = false"
@timeout="toast.active = false"
:show-timeout-progress="true"
class="!bg-success-100 !text-success-700"
/>
Result
Component With Custom Slots
icon
, title
and message
slots are used.
js
const toast = ref({
message: ['Might be important.', 'Who knows?', 'It\'s gonna be fine'],
active: false,
title: 'Scoped Toast'
})
html
<button @click="toast.active = true">Click Me</button>
<message-toast
v-bind="toast"
@close="toast.active = false"
@timeout="toast.active = false"
class="!bg-success-100 !text-success-700"
>
<template #title><span class="text-3xl">{{ toast.title }}</span></template>
<template #icon>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-12">
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
</svg>
</template>
<template #default>
<ol>
<li v-for="line in toast.message">{{ line }}</li>
</ol>
</template>
</message-toast>
Result
Properties
Name | Type | Default | Description |
---|---|---|---|
title | String | Title of the toast | |
message | String , String[] | Text message of the toast; when an array of strings is submitted every array item is displayed in a separate line | |
active | Boolean | false | When set to true the toast is displayed and the timeout starts to count |
timeout | Number | 5000 | Duration in milliseconds after which the timeout event fires |
show-timeout-progress | Boolean | false | when true a progress bar synced with the remaining timeout is displayed |
Events
Name | Arguments | Description |
---|---|---|
close | Emitted when the user clicks the close button | |
timeout | Emitted when the configured timeout period has elapsed |
Slots
Name | Scoped | Description |
---|---|---|
default | The container holding the message line(s) | |
title | The title line | |
icon | An additional slot which allows the display of an icon along with the title |