E2 Notifications Demo

Basic Notifications (e2-notification)

Simple notification toasts with different types and messages.

HTML Markup:

<e2-notification
  id="info-notification"
  type="info"
  title="Information"
  message="This is an informational message."
  timeout="5000"
  dismissible>
</e2-notification>

Ready to show notifications...

Programmatic Toast Creation

Create toasts dynamically using JavaScript functions.

JavaScript Usage:

// Using createToast utility
createToast('success', 'Operation completed!', {
  title: 'Success',
  timeout: 3000
});

// Using Toast API
Toast.success('File saved successfully!');
Toast.error('Connection failed', { persistent: true });

Notification Container (e2-notification-container)

Container for managing notification positioning and lifecycle.

Notifications: 0

HTML Markup:

<e2-notification-container
  id="main-container"
  position="top-right"
  max-notifications="5"
  stack-direction="down"
  spacing="medium">
</e2-notification-container>

Advanced Features

Demonstration of advanced notification features and customization.

Ready for advanced demos...

Code Examples

Complete code examples for common use cases.

Basic Usage:

// Show pre-defined notification
const notification = document.getElementById('my-notification');
await notification.show();

// Create toast programmatically
createToast('success', 'Operation completed!');

// Using Toast API
Toast.info('Welcome to the application!');
Toast.error('Something went wrong!', { persistent: true });

Container Management:

// Create container
const container = document.createElement('e2-notification-container');
container.position = 'bottom-right';
container.maxNotifications = 3;
document.body.appendChild(container);

// Add notification to specific container
createToast('info', 'Message', {
  container: '#my-container'
});

// Clear all notifications
container.clear();

Event Handling:

// Listen to notification events
document.addEventListener('notification-show', (e) => {
  console.log('Notification shown:', e.detail);
});

document.addEventListener('notification-dismiss', (e) => {
  console.log('Notification dismissed:', e.detail);
});

// Container events
document.addEventListener('notification-container-update', (e) => {
  console.log('Container updated:', e.detail.count);
});