FeedbackToast

How to use FeedbackToast component

How to use it :

Create child

Importe vue and create a child with ref of ref :

import FeedbackToast from '@/components/FeedbackToast.vue'

const toastsRef = ref()

<FeedbackToast ref="toastsRef" />

if you want you can set height (and max height) of toast container

<FeedbackToast ref="toastsRef" class="h-1/2" />

Props

3 props possibilities (optionnal) :

Name	Description	Default
maxToasts	Select the maximum amount of toast that can be seen	3
posX	Select the position of the toasts on the screen in X (start, center, end)	center
posY	Select the position of the toasts on the screen in Y (top, middle, bottom)	top

<FeedbackToast ref="toastsRef" maxToasts="5" posX="end" posY="bottom" />

callable function

Create toast :

function name	parameter	Description
addError	String content -> required, json data -> optionnal	Create a red toast
addSuccess	String content -> required, json data -> optionnal	Create a green toast
addInfo	String content -> required, json data -> optionnal	Create a blue toast
addWarning	String content -> required, json data -> optionnal	Create a yellow toast

json data possibilities

Name	Value	Description
action	function, default null	Set a function to execute if the user click on the button
typebtn	int, default 1	Set a number for type of button
timeout	int, default 3000	Set a int to set timeout in millisecond
title	string, default null	Set a title of card

toastsRef.value.addInfo(
    'message',
    {
      title: "It's title",
      action: functionCall,
      typebtn: 2,
      timeout: 4000
     }
  )

Exemple :

<script>
import FeedbackToast from '@/components/FeedbackToast.vue'

const toastsRef = ref()
toastsRef.value.addError("Hey")
toastsRef.value.addSuccess('Message successfuly sended', {title: "Sended"})
toastsRef.value.addInfo('Message Summary', {title: "New Message", action: functionName})
toastsRef.value.addWarning("Hello", {timeout: 1000})
</script>

<template>
<FeedbackToast ref="toastsRef" />
</template>