jingrow-ui/docs/components/toast.md

Toast

This component is used to show a message in a floating box relative to the browser window.

Usage

Call the toast function with options to create a toast. You need to make sure you include the Toasts component in your root component (App.vue).

Show Toast

<template>
  <Button
    @click="
      toast({
        title: 'Success',
        text: 'File Uploaded Successfully!',
        icon: 'check',
        iconClasses: 'text-green-500',
      })
    "
  >
    Show Toast
  </Button>
</template>

<script setup>
import { toast, Button } from 'jingrow-ui'
</script>

App.vue

<template>
  <!-- your markup -->
  <Toasts />
</template>
<script setup>
import { Toasts } from 'jingrow-ui'
</script>

position

Toasts can be positioned in six places with respect to the browser window.

• top-left
• top-center
• top-right
• bottom-left
• bottom-center
• bottom-right

Top Left Top Center Top Right Bottom Left Bottom Center Bottom Right

<template>
  <div class="grid grid-cols-3 gap-4">
    <Button @click="makeToast({ position: 'top-left' })"> Top Left </Button>
    <Button @click="makeToast({ position: 'top-center' })"> Top Center </Button>
    <Button @click="makeToast({ position: 'top-right' })"> Top Right </Button>
    <Button @click="makeToast({ position: 'bottom-left' })"> Bottom Left </Button>
    <Button @click="makeToast({ position: 'bottom-center' })"> Bottom Center </Button>
    <Button @click="makeToast({ position: 'bottom-right' })"> Bottom Right </Button>
  </div>
</template>

<script setup>
import { Tooltip, Button } from 'jingrow-ui'

let makeToast = (props = {}) => toast({
    title: 'Success',
    text: 'File Uploaded Successfully!',
    timeout: 2,
    ...props
})
</script>

Options

Name	Default	Value
title	null	String
text	null	String
timeout	5	Number in seconds
position	'top-center'	See position
icon	null	FeatherIcon name
iconClasses	null	CSS Classes to apply to FeatherIcon component