Tabs Box Component
Component Introduction
A custom Web Component for creating tabbed interfaces, supporting multiple tab switching, suitable for grouped content display.
Attributes
| Attribute | Description |
|---|---|
| data-tab (required) | Identifies this as tab content (on child element) |
| label (required) | Tab title (on child element) |
Usage Examples
User Management Interface Example
User Profile
Name: John Doe
Email: john@example.com
Phone: 12345678901
Recent Orders
- Order #12345 - Shipped
- Order #12346 - Processing
- Order #12347 - Completed
Account Settings
Notifications: Receive email notifications
Simple Tabs Example
Content 1
Content 2
Content 3
Content 4
Content 5
Content 6
HTML Code
html
<!-- User management interface example -->
<tabs-box class="tb-tabs">
<div data-tab label="User Info">
<h3>User Profile</h3>
<p>Name: John Doe</p>
<p>Email: john@example.com</p>
</div>
<div data-tab label="Order Management">
<h3>Recent Orders</h3>
<ul>
<li>Order #12345 - Shipped</li>
<li>Order #12346 - Processing</li>
</ul>
</div>
</tabs-box>
<!-- Simple tabs example -->
<tabs-box>
<div data-tab label="Tab 1">Content 1</div>
<div data-tab label="Tab 2">Content 2</div>
<div data-tab label="Tab 3">Content 3</div>
</tabs-box>Features
- Supports multiple tabs
- Click to switch tab content
- Auto-scroll when too many tabs