Toast

The AToasts component is used to display messages in an overlay.

Import

import { AToasts } from 'ayovue'
import 'ayovue/themes/default/toasts.css'

useToast

Toast component is controlled via the useToast composable that needs to be import.

import { useToast } from 'ayovue'

Then the showToast function can be used to configure toasts as

const toast = useToast()
toast.showToast(object)

showToast()

showToast() function takes an object with the following properties to define toasts:

1. type : Defines the color variant of toast which has the values primary, secondary, info, success, warning, danger.
2. detail : Description of the toast.
3. summary : Title of the toast.
4. duration : Duration in seconds to show toast.
5. group : Define the group of toast witch is connected with the group prop of the toast component.

Examples

View Codes

<template>
  <AButton @click="showSuccessToast()">Top right primary</AButton>
  <AToasts position="top-right" group="tr"> </AToasts>
</template>

<script setup>
// Imports
import { AButton, AToasts, useToast } from 'Ayovue'
const toast = useToast()

function showSuccessToast() {
  toast.showToast({
    type: 'success',
    detail: 'successfully done',
    summary: 'Success',
    duration: 3000,
    group: 'tr'
  })
}
</script>

View Codes

<template>
  <AButton @click="showInfoToast" class="mt-2" variant="info">Bottom left Info</AButton>
  <AToasts position="bottom-left" group="bl"> </AToasts>
</template>

<script setup>
// Imports
import { AButton, AToasts, useToast } from 'Ayovue'
const toast = useToast()

function showInfoToast() {
  toast.showToast({
    type: 'info',
    detail: 'Account will be verified soon',
    summary: 'Information',
    duration: 3000,
    group: 'bl'
  })
}
</script>

View Codes

<template>
  <AButton @click="showWarningToast" class="mt-2" variant="warning">Top Center Warning</AButton>
  <AToasts position="top-center" group="tc"> </AToasts>
</template>

<script setup>
// Imports
import { AButton, AToasts, useToast } from 'Ayovue'
const toast = useToast()

function showWarningToast() {
  toast.showToast({
    type: 'warning',
    detail: 'This might cause error!',
    summary: 'Warning',
    duration: 3000,
    group: 'tc'
  })
}
</script>

Similarly

   

Custom Slot

The content of the toast can be customize by using default slot.

View Codes

<template>
  <AButton @click="generateToast('tr')" class="mt-2">Top Right Custom Slot</AButton>
  <AToasts position="top-right" group="tr">
    <template #default="{ toast, close }">
      <div class="custom-toast">
        <div class="ta-right">
          <button @click="close(toast)" class="close-button">X</button>
        </div>
        <div class="text-center">
          <img
            src="https://cdn-icons-png.flaticon.com/512/5610/5610944.png"
            style="max-height: 44px"
            alt="picture"
          />
          <h2>{{ toast.summary }}</h2>
          <p>{{ toast.detail }}</p>
        </div>
      </div>
    </template>
  </AToasts>
</template>

<script setup>
// Imports
import { AButton, AToasts, useToast } from 'Ayovue'
const toast = useToast()

function generateToast(group?: string) {
  toast.showToast({
    type: 'info',
    detail: 'Done successfully',
    summary: 'Tost title here',
    duration: 10000,
    group
  })
}
</script>