E2 - Editor Elements - Toolbar Demo

Toolbar Components

Toolbar with buttons and separators:

Toolbar Menu Example

Toolbar with dropdown menus (menu bar style):

Dark Theme Example

Toolbar with dark theme:

Copy-Paste Examples

Ready-to-use code snippets for your projects:

Basic Toolbar HTML:

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

<!-- Basic Toolbar -->
<e2-toolbar>
  <e2-toolbar-button label="New" icon="📄"></e2-toolbar-button>
  <e2-toolbar-button label="Open" icon="📁"></e2-toolbar-button>
  <e2-toolbar-button label="Save" icon="💾"></e2-toolbar-button>
  <e2-toolbar-separator></e2-toolbar-separator>
  <e2-toolbar-button label="Cut" icon="✂️"></e2-toolbar-button>
  <e2-toolbar-button label="Copy" icon="📋"></e2-toolbar-button>
  <e2-toolbar-button label="Paste" icon="📌"></e2-toolbar-button>
</e2-toolbar>

Dark Theme Toolbar:

<e2-toolbar theme="dark">
  <e2-toolbar-button label="Undo" icon="↶" theme="dark"></e2-toolbar-button>
  <e2-toolbar-button label="Redo" icon="↷" theme="dark"></e2-toolbar-button>
  <e2-toolbar-separator theme="dark"></e2-toolbar-separator>
  <e2-toolbar-button label="Zoom In" icon="🔍" theme="dark"></e2-toolbar-button>
</e2-toolbar>

Toolbar Menu (Menu Bar Style):

<e2-toolbar>
  <e2-toolbar-menu label="File">
    <e2-context-menu-item label="New" icon="📄" value="new"></e2-context-menu-item>
    <e2-context-menu-item label="Open" icon="📁" value="open"></e2-context-menu-item>
    <e2-context-menu-separator></e2-context-menu-separator>
    <e2-context-menu-item label="Save" icon="💾" value="save" shortcut="Ctrl+S"></e2-context-menu-item>
  </e2-toolbar-menu>

  <e2-toolbar-menu label="Edit">
    <e2-context-menu-item label="Cut" icon="✂️" value="cut" shortcut="Ctrl+X"></e2-context-menu-item>
    <e2-context-menu-item label="Copy" icon="📋" value="copy" shortcut="Ctrl+C"></e2-context-menu-item>
    <e2-context-menu-item label="Paste" icon="📌" value="paste" shortcut="Ctrl+V"></e2-context-menu-item>
  </e2-toolbar-menu>
</e2-toolbar>

JavaScript Event Handling:

// Listen for toolbar button clicks
document.addEventListener('toolbar-button-click', event => {
  const { buttonId, button } = event.detail;
  console.log(`Button clicked: ${buttonId}`, button);
});

// Listen for toolbar menu events
document.addEventListener('toolbar-menu-show', event => {
  const { menuId, menu } = event.detail;
  console.log(`Menu opened: ${menuId}`, menu);
});

document.addEventListener('toolbar-menu-hide', event => {
  const { menuId, menu } = event.detail;
  console.log(`Menu closed: ${menuId}`, menu);
});

// Listen for menu item clicks
document.addEventListener('context-menu-item-click', event => {
  const { itemId, value, menuId } = event.detail;
  console.log(`Menu item clicked: ${value} in menu ${menuId}`);
});

// Programmatic control
const button = document.querySelector('e2-toolbar-button');
button.active = true;
button.disabled = false;

const menu = document.querySelector('e2-toolbar-menu');
menu.open(); // Open dropdown
menu.close(); // Close dropdown

Output

Click buttons to see events: