E2 App Element Demo

This demonstrates the <e2-app> wrapper element with comprehensive styling for forms and UI elements.

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a regular paragraph with bold text and a link.

This is small text that provides additional context.

Form Controls

Text Input:

Email Input:

Password Input:

Number Input:

Date Input:

Time Input:

Textarea:

Select Dropdown:

Range Slider:

File Input:

Checkboxes

Option 1

Option 2 (checked)

Option 3 (disabled)

Radio Buttons

Choice 1

Choice 2 (selected)

Choice 3 (disabled)

Tabs Component

Overview

Features

Examples

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>

Split Panel Component

Left Panel

This panel contains styled form elements:

Show hidden items

Main Content

This is the main content area with properly styled text and controls.

Collapsible Panel Component

Properties Panel

Object Properties

Position: (100, 50)

Size: 200x150

Rotation: 45°

Visible: Yes
Locked: No
Layer: Foreground

Utility Classes

This text uses the text-muted utility class.

This text uses the text-secondary utility class.

This div uses bg-secondary, rounded, border, and shadow-sm utility classes.

CSS Custom Properties

The E2 App element provides many CSS custom properties for customization:

Primary Background
--bg-primary

Secondary Background
--bg-secondary

Tertiary Background
--bg-tertiary

Accent Color
--accent-color