Toast Plugin

A Service for displaying toast notifications with multiple severity levels and customizable timing. Perfect for user feedback, status updates, and non-intrusive messaging in web applications.

Features

• Multiple Notification Types: Error, Warning, Success, and Info toasts
• Customizable Duration: Set custom display time for each toast
• Interactive Controls: Pause on hover, resume on leave, click to dismiss
• Auto-dismiss: Automatic closure with visual progress bar
• Consistent Positioning: Top-end positioning for non-intrusive display

Service Reference

Toast Methods

The utility provides four main methods for different notification types:

toast.error(msg: string, delay?: number): void
toast.warn(msg: string, delay?: number): void
toast.success(msg: string, delay?: number): void
toast.info(msg: string, delay?: number): void

Parameters

Parameter	Type	Default	Description
msg	string	-	The message to display in the toast
delay	number	3000	Duration in milliseconds before auto-dismiss

Usage Examples

Using the Plugin in Vue Components

The toast service is available as a global plugin in Vue components via $toast:

<template>
    <button @click="$toast.success('Data saved successfully!')">Fire Toast!</button>
</template>

<script setup lang="ts"></script>

Using the Function Export

You can also import and use the toast service directly:

import { toast } from 'dolphin-components';

// Success notification
toast.success('Data saved successfully!');

// Error notification
toast.error('Failed to save data. Please try again.');

// Warning notification
toast.warn('Your session will expire in 5 minutes.');

// Info notification
toast.info('New update available. Click here to refresh.');

Custom Duration

// Quick notification (1 second)
toast.success('Copied to clipboard!', 1000);

// Long notification (10 seconds)
toast.error('Critical error occurred. Please contact support.', 10000);

// Permanent notification (very long duration)
toast.info('Please complete your profile setup.', 30000);

Common Use Cases

• Form Validation: Show validation errors and success messages
• API Responses: Display server response feedback
• File Operations: Upload/download progress and results
• User Authentication: Login/logout status messages
• Real-time Updates: WebSocket notifications and alerts
• Background Operations: Long-running task completion
• System Status: Connection status and system alerts