« E2 - Status Bar Demo

Basic Status Bar

A simple status bar with items in different sections:

Interactive Status Items

Status bar with clickable items and progress indicators:

Code Examples

<e2-status-bar>
  <e2-status-section slot="left" position="left">
    <e2-status-item type="indicator" label="Ready" value="●"></e2-status-item>
    <e2-status-item type="text" label="Ln" value="3"></e2-status-item>
    <e2-status-item type="text" label="Col" value="2"></e2-status-item>
  </e2-status-section>

  <e2-status-section slot="center" position="center">
    <e2-status-item type="progress" label="Loading" value="0.7"></e2-status-item>
  </e2-status-section>

  <e2-status-section slot="right" position="right">
    <e2-status-item type="tool" label="Brush" value="10px" clickable></e2-status-item>
  </e2-status-section>
</e2-status-bar>

// Listen for status item clicks
document.addEventListener('status-item-click', event => {
  const { itemId, item, itemType, value } = event.detail;
  console.log(`Status item clicked: ${itemId}`, item);
});

// Listen for status item updates
document.addEventListener('status-item-update', event => {
  const { itemId, oldValue, newValue } = event.detail;
  console.log(`Item ${itemId} updated: ${oldValue} → ${newValue}`);
});

// Listen for status messages
document.addEventListener('status-message', event => {
  const { message, type, duration } = event.detail;
  console.log(`Status message: ${message} (${type})`);
});

// Programmatic control
const statusBar = document.querySelector('e2-status-bar');
statusBar.showMessage('Operation completed!', 'success', 3000);

const progressItem = document.querySelector('#progress-item');
progressItem.setProgress(0.75); // 75%

const toolItem = document.querySelector('#current-tool');
toolItem.value = 'Eraser (5px)';

Output

Click status items to see events: