E2 - Editor Elements - Dialog Demo

Basic Dialog (e2-dialog)

A flexible dialog wrapper that can contain any content.

HTML Markup:

<e2-dialog id="basic-dialog" title="Basic Dialog" closable>
  <p>This is a basic dialog with custom content.</p>
  <p>You can put any HTML content here.</p>

  <div slot="footer">
    <button onclick="closeBasicDialog()">Close</button>
  </div>
</e2-dialog>

Ready to show dialog...

Confirmation Dialog (e2-confirm)

Promise-based confirmation dialogs for yes/no decisions.

HTML Markup:

<e2-confirm
  id="confirm-dialog"
  title="Delete File"
  message="Are you sure you want to delete this file? This action cannot be undone."
  confirm-text="Delete"
  cancel-text="Cancel"
  danger>
</e2-confirm>

Ready to show confirmation...

Alert Dialog (e2-alert)

Simple message dialogs for notifications and information.

HTML Markup:

<e2-alert
  id="alert-dialog"
  type="error"
  title="Error Occurred"
  message="Something went wrong while processing your request."
  button-text="OK">
</e2-alert>

Ready to show alert...

Prompt Dialog (e2-prompt)

Input dialogs with validation for collecting user input.

HTML Markup:

<e2-prompt
  id="prompt-dialog"
  title="Enter Your Name"
  message="Please enter your full name:"
  placeholder="John Doe"
  required
  min-length="2"
  max-length="50">
</e2-prompt>

Ready to show prompt...

Copy-Paste Examples

Ready-to-use code snippets for your projects:

Complete Setup HTML:

<!-- Load E2 Library -->
<script src="path/to/e2.min.js"></script>

<!-- Basic Dialog -->
<e2-dialog id="my-dialog" title="Dialog Title" closable>
  <p>Your dialog content goes here.</p>
  <div slot="footer">
    <button onclick="document.getElementById('my-dialog').close()">Close</button>
  </div>
</e2-dialog>

<!-- Alert Dialog -->
<e2-alert
  id="alert-dialog"
  type="info"
  title="Information"
  message="This is an informational message.">
</e2-alert>

<!-- Confirmation Dialog -->
<e2-confirm
  id="confirm-dialog"
  title="Confirm Action"
  message="Are you sure you want to continue?"
  confirm-text="Yes"
  cancel-text="No">
</e2-confirm>

<!-- Prompt Dialog -->
<e2-prompt
  id="prompt-dialog"
  title="Enter Value"
  message="Please enter a value:"
  placeholder="Type here..."
  required>
</e2-prompt>

JavaScript Usage Patterns:

// Show dialogs
document.getElementById('my-dialog').show();        // Non-modal
document.getElementById('my-dialog').showModal();   // Modal

// Alert examples
const alert = document.getElementById('alert-dialog');
alert.type = 'success';
alert.message = 'Operation completed!';
await alert.show();

// Confirmation with result
const confirmed = await document.getElementById('confirm-dialog').show();
if (confirmed) {
  console.log('User confirmed');
} else {
  console.log('User cancelled');
}

// Prompt with validation
const prompt = document.getElementById('prompt-dialog');
prompt.required = true;
prompt.placeholder = 'Enter email...';
prompt.setAttribute('pattern', '[^@]+@[^@]+\\.[^@]+');
const result = await prompt.show();
console.log('User entered:', result);

Programmatic Creation:

// Create and show alert programmatically
const alert = document.createElement('e2-alert');
alert.type = 'error';
alert.title = 'Error';
alert.message = 'Something went wrong!';
document.body.appendChild(alert);
await alert.show();
alert.remove(); // Clean up

// Create confirmation dialog
const confirm = document.createElement('e2-confirm');
confirm.title = 'Delete Item';
confirm.message = 'This action cannot be undone.';
confirm.danger = true;
document.body.appendChild(confirm);
const result = await confirm.show();
confirm.remove();

Theme Support:

// Apply theme to all dialogs
function setTheme(theme) {
  document.querySelectorAll('e2-dialog, e2-confirm, e2-alert, e2-prompt')
    .forEach(dialog => dialog.theme = theme);
}

// Set theme on individual dialog
const dialog = document.getElementById('my-dialog');
dialog.theme = 'dark';

// CSS custom properties for theming
:root {
  --e2-dialog-bg: #ffffff;
  --e2-dialog-text: #333333;
  --e2-dialog-border: #cccccc;
}

Usage Notes

Best practices for using E2 dialog components in your projects.

Recommended Usage Pattern:

<!-- Declare dialogs in your HTML markup -->
<e2-confirm id="delete-confirm"
  title="Delete File"
  message="Are you sure you want to delete this file?"
  confirm-text="Delete"
  cancel-text="Cancel"
  danger>
</e2-confirm>

<e2-alert id="success-alert"
  type="success"
  title="Success"
  message="Operation completed successfully!">
</e2-alert>

<script>
// Use JavaScript to show/hide and handle results
async function handleDelete() {
  const confirmed = await document.getElementById('delete-confirm').show();
  if (confirmed) {
    // Perform delete operation
    await document.getElementById('success-alert').show();
  }
}
</script>

Theme Integration:

// Apply theme to all dialogs at once
function setTheme(theme) {
  document.querySelectorAll('e2-dialog, e2-confirm, e2-alert, e2-prompt')
    .forEach(dialog => dialog.theme = theme);
}