Basic Tab Interface
A simple tab interface with three tabs. Click on the tabs to switch between different content panels.
Welcome to E2 Tabs
This is a demonstration of the E2 tab system. The tab components provide a clean and intuitive way to organize content into separate, switchable sections.
Key benefits include:
- Easy content organization
- Space-efficient layout
- Intuitive navigation
- Flexible styling options
Tab Features
The E2 tab system includes many powerful features:
- Multiple tab positions (top, bottom, left, right)
- Closable tabs with confirmation
- Icons and labels
- Theme support (light, dark, auto)
- Keyboard navigation
- Programmatic API
- Custom events
- Responsive design
Usage Examples
Here's how to create a basic tab interface:
<e2-tab-container>
<e2-tab slot="tabs" label="Tab 1">Tab 1</e2-tab>
<e2-tab slot="tabs" label="Tab 2">Tab 2</e2-tab>
<e2-tab-panel slot="panels">
Content for Tab 1
</e2-tab-panel>
<e2-tab-panel slot="panels">
Content for Tab 2
</e2-tab-panel>
</e2-tab-container>HTML Markup:
<e2-tab-container>
<e2-tab slot="tabs" label="Overview" icon="📋">Overview</e2-tab>
<e2-tab slot="tabs" label="Features" icon="⭐">Features</e2-tab>
<e2-tab slot="tabs" label="Examples" icon="💡">Examples</e2-tab>
<e2-tab-panel slot="panels">
<h3>Overview Content</h3>
<p>Content for the overview tab goes here.</p>
</e2-tab-panel>
<e2-tab-panel slot="panels">
<h3>Features Content</h3>
<p>Content for the features tab goes here.</p>
</e2-tab-panel>
<e2-tab-panel slot="panels">
<h3>Examples Content</h3>
<p>Content for the examples tab goes here.</p>
</e2-tab-panel>
</e2-tab-container>
Closable Tabs
Tabs that can be closed by clicking the × button. New tabs can be added dynamically.
Document 1
This is the content of Document 1. This tab can be closed by clicking the × button.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Document 2
This is the content of Document 2. Notice how each tab maintains its own content state.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Settings Panel
Configuration options would go here. Tabs are perfect for organizing complex forms and settings.
HTML Markup:
<e2-tab-container closable>
<e2-tab slot="tabs" label="Document 1" icon="📄" closable>Document 1</e2-tab>
<e2-tab slot="tabs" label="Document 2" icon="📄" closable>Document 2</e2-tab>
<e2-tab-panel slot="panels">
<h3>Document 1</h3>
<p>Content for document 1.</p>
</e2-tab-panel>
<e2-tab-panel slot="panels">
<h3>Document 2</h3>
<p>Content for document 2.</p>
</e2-tab-panel>
</e2-tab-container>
Tab Positions
Tabs can be positioned on any side of the container: top, bottom, left, or right.
Home Dashboard
Welcome to your dashboard! This demonstrates how tabs work in different positions.
Try changing the tab position using the dropdown above to see how the layout adapts.
User Profile
Your profile information and settings would be displayed here.
Tab positioning is especially useful for different types of interfaces and user preferences.
Messages
Your messages and conversations would appear in this panel.
Left and right positioned tabs work great for navigation-heavy interfaces.
Application Settings
Configure your application preferences here.
Bottom tabs are useful for mobile-style interfaces or when you want the content to be the primary focus.
HTML Markup:
<e2-tab-container tab-position="top">
<e2-tab slot="tabs" label="Home" icon="🏠">Home</e2-tab>
<e2-tab slot="tabs" label="Profile" icon="👤">Profile</e2-tab>
<e2-tab slot="tabs" label="Settings" icon="⚙️">Settings</e2-tab>
<e2-tab-panel slot="panels">
<h3>Home Content</h3>
<p>Home dashboard content.</p>
</e2-tab-panel>
<e2-tab-panel slot="panels">
<h3>Profile Content</h3>
<p>User profile information.</p>
</e2-tab-panel>
<e2-tab-panel slot="panels">
<h3>Settings Content</h3>
<p>Application settings.</p>
</e2-tab-panel>
</e2-tab-container>
Theme Support
Tabs support light, dark, and auto themes. The auto theme follows system preferences.
Light Theme
The light theme provides a clean, bright interface that's easy on the eyes in well-lit environments.
Perfect for daytime use and professional applications.
Dark Theme
The dark theme reduces eye strain in low-light conditions and provides a modern, sleek appearance.
Great for coding, creative work, and evening use.
Auto Theme
Auto theme automatically switches between light and dark based on your system settings.
Provides the best experience throughout the day without manual intervention.
HTML Markup:
<e2-tab-container theme="auto">
<e2-tab slot="tabs" label="Light Mode" icon="☀️">Light</e2-tab>
<e2-tab slot="tabs" label="Dark Mode" icon="🌙">Dark</e2-tab>
<e2-tab-panel slot="panels">
<h3>Light Theme</h3>
<p>Clean, bright interface for daytime use.</p>
</e2-tab-panel>
<e2-tab-panel slot="panels">
<h3>Dark Theme</h3>
<p>Modern, sleek appearance for low-light conditions.</p>
</e2-tab-panel>
</e2-tab-container>
Programmatic API
Tabs can be controlled programmatically using JavaScript. This demo shows various API methods.
API Demo Tab 1
This tab was selected programmatically. You can control tab selection using the API.
Current tab ID: -
API Demo Tab 2
The tab container provides methods for adding, removing, and selecting tabs programmatically.
Total tabs: -
API Demo Tab 3
You can also listen for tab events and respond to user interactions.
Last event: -
JavaScript API:
// Get tab container
const container = document.querySelector('e2-tab-container');
// Select a tab by ID
container.selectTabById('tab-id');
// Add a new tab
const result = container.addTab('New Tab', '<p>Tab content</p>');
// Remove a tab
container.removeTabById('tab-id');
// Listen for events
container.addEventListener('tab-select', (event) => {
console.log('Selected tab:', event.detail.tabId);
});
container.addEventListener('tab-close', (event) => {
console.log('Closed tab:', event.detail.tabId);
});