📊 Interactive Dashboard
A complete dashboard example showing data binding and component interaction.
Component Definitions
<html-components>
<dashboard-widget compo-attrs="theme=light">
<div class="dashboard" data-theme="@{theme}">
<h3>📈 Dashboard Overview</h3>
<div class="stats-grid">@{self.data}</div>
</div>
</dashboard-widget>
<stat-card compo-attrs="icon,value,label">
<div class="stat-card">
<div class="stat-icon">@{icon}</div>
<div class="stat-value">@{value}</div>
<div class="stat-label">@{label}</div>
</div>
</stat-card>
<user-list>
<div class="user-list">
<h3>👤 Active Users</h3>
<div class="user-items">@{self.data}</div>
</div>
</user-list>
<user-item compo-attrs="name,role,status">
<div class="user-item">
<span class="user-status status-@{status}"></span>
<span class="user-name">@{name}</span>
<span class="user-role">@{role}</span>
</div>
</user-item>
</html-components>
🛒 Shopping Cart
Interactive shopping cart with add/remove functionality.
Shopping Cart Implementation
<shopping-cart>
<div class="shopping-cart">
<h3>🛒 Shopping Cart</h3>
<div class="cart-items">@{self.data}</div>
<div class="cart-total">
Total: <span id="cartTotal">$0.00</span>
</div>
</div>
</shopping-cart>
<cart-item compo-attrs="product,price,quantity,id">
<div class="cart-item" id="item-@{id}">
<span class="item-name">@{product}</span>
<span class="item-price">$@{price}</span>
<div class="quantity-controls">
<button onclick="updateQuantity('@{id}', -1)">-</button>
<span class="quantity">@{quantity}</span>
<button onclick="updateQuantity('@{id}', 1)">+</button>
</div>
<button onclick="removeItem('@{id}')" class="remove-btn">🗑️</button>
</div>
</cart-item>
💬 Chat Interface
Real-time chat component with message types and timestamps.
📊 Data Visualization
Interactive charts and progress bars.
🎮 Interactive Game
Simple number guessing game demonstrating state management.
🎨 Theme Customization
Dynamic theme switching with CSS custom properties.