Snackbar Component Demos

Basic Notifications

Simple notifications with different types and default styling using convenience methods.

Code Example

<template>
  <div>
    <button @click="showSuccess">Success</button>
    <button @click="showError">Error</button>
    <button @click="showWarning">Warning</button>
    <button @click="showInfo">Info</button>
    
    <OSnackbar />
  </div>
</template>

<script setup>
import { useSnackbar } from './composables/useSnackbarComposable';

const { success, error, warning, info } = useSnackbar();

const showSuccess = () => {
  success('Success!', {
    secondaryMessage: 'Your action was completed successfully.',
    timeout: 3000
  });
};

const showError = () => {
  error('Error!', {
    secondaryMessage: 'Something went wrong. Please try again.',
    timeout: 5000
  });
};

const showWarning = () => {
  warning('Warning!', {
    secondaryMessage: 'Please review your input before proceeding.',
    timeout: 4000
  });
};

const showInfo = () => {
  info('Information', {
    secondaryMessage: 'Here is some helpful information.',
    timeout: 3000
  });
};
</script>

Demo

Different Positions

Notifications positioned at different screen locations.

Code Example

<template>
  <div class="position-demo">
    <button @click="showTopLeft">Top Left</button>
    <button @click="showTopCenter">Top Center</button>
    <button @click="showTopRight">Top Right</button>
    <button @click="showBottomLeft">Bottom Left</button>
    <button @click="showBottomCenter">Bottom Center</button>
    <button @click="showBottomRight">Bottom Right</button>
    
    <OSnackbar />
  </div>
</template>

<script setup>
import { useSnackbar } from './composables/useSnackbarComposable';

const { showSnackbar } = useSnackbar();

const showTopLeft = () => {
  showSnackbar({
    type: 'info',
    primaryMessage: 'Top Left',
    secondaryMessage: 'Positioned at top-left corner.',
    position: 'top-left',
    timeout: 3000,
    icon: '<span style="color: #3b82f6; font-size: 1.2rem;">📍</span>'
  });
};

// ... other position methods
</script>

Demo

Custom Notifications

Notifications with custom content, icons, and styling.

Code Example

<template>
  <div>
    <button @click="showCustom">Custom Notification</button>
    <button @click="showPersistent">Persistent Notification</button>
    
    <OSnackbar />
  </div>
</template>

<script setup>
import { useSnackbar } from './composables/useSnackbarComposable';

const { showSnackbar } = useSnackbar();

const showCustom = () => {
  showSnackbar({
    type: 'info',
    primaryMessage: 'Custom Notification',
    secondaryMessage: 'This is a custom notification with different styling.',
    timeout: 0, // No auto-dismiss
    isPersistent: true,
    showCloseButton: true,
    icon: '<span style="color: #8b5cf6; font-size: 1.2rem;">🎉</span>'
  });
};

const showPersistent = () => {
  showSnackbar({
    type: 'warning',
    primaryMessage: 'Persistent Notification',
    secondaryMessage: 'This notification will not auto-dismiss.',
    timeout: 0, // No auto-dismiss
    isPersistent: true,
    showCloseButton: true
  });
};
</script>

Demo

Form Feedback

Real-world example of using notifications for form feedback.

Code Example

<template>
  <div class="form-demo">
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label for="email">Email:</label>
        <input 
          id="email" 
          v-model="email" 
          type="email" 
          required 
          placeholder="Enter your email"
        />
      </div>
      
      <div class="form-group">
        <label for="message">Message:</label>
        <textarea 
          id="message" 
          v-model="message" 
          required 
          placeholder="Enter your message"
        ></textarea>
      </div>
      
      <button type="submit" class="submit-btn">Submit Form</button>
    </form>
    
    <OSnackbar />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useSnackbar } from './composables/useSnackbarComposable';

const { success, error } = useSnackbar();
const email = ref('');
const message = ref('');

const handleSubmit = () => {
  // Simulate form submission
  if (email.value && message.value) {
    success('Form Submitted!', {
      secondaryMessage: 'Your message has been sent successfully.',
      timeout: 4000
    });
    
    // Reset form
    email.value = '';
    message.value = '';
  } else {
    error('Validation Error', {
      secondaryMessage: 'Please fill in all required fields.',
      timeout: 5000
    });
  }
};
</script>

Demo

Email:

Message:

API Response Notifications

Example of using notifications for API response feedback.

Code Example

<template>
  <div>
    <button @click="simulateApiCall">Simulate API Call</button>
    <OSnackbar />
  </div>
</template>

<script setup>
import { useSnackbar } from './composables/useSnackbarComposable';

const { showSnackbar, success, error } = useSnackbar();

const simulateApiCall = async () => {
  // Show loading state
  showSnackbar({
    type: 'info',
    primaryMessage: 'Loading...',
    secondaryMessage: 'Please wait while we process your request.',
    timeout: 0,
    isPersistent: true,
    showCloseButton: false
  });
  
  // Simulate API delay
  await new Promise(resolve => setTimeout(resolve, 2000));
  
  // Show success or error based on random result
  if (Math.random() > 0.3) {
    success('API Success!', {
      secondaryMessage: 'Data has been successfully retrieved.',
      timeout: 4000
    });
  } else {
    error('API Error', {
      secondaryMessage: 'Failed to fetch data. Please try again.',
      timeout: 5000
    });
  }
};
</script>

Demo

Configuration Examples

Examples of configuring the snackbar behavior.

Code Example

<template>
  <div>
    <button @click="configureAndShow">Configure & Show</button>
    <OSnackbar />
  </div>
</template>

<script setup>
import { useSnackbar } from './composables/useSnackbarComposable';

const { 
  showSnackbar, 
  setPosition, 
  setOffset, 
  setDefaultTimeout 
} = useSnackbar();

const configureAndShow = () => {
  // Configure snackbar settings
  setPosition('top-right');
  setOffset(2, 2); // 2rem from top and right
  setDefaultTimeout(6000); // 6 seconds
  
  // Show notification with new settings
  showSnackbar({
    type: 'success',
    primaryMessage: 'Configured Notification',
    secondaryMessage: 'This notification uses custom configuration.',
    timeout: 6000
  });
};
</script>

Demo