Spaces:
Running
Running
| class CustomTabGroup extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .tab-header { | |
| display: flex; | |
| border-bottom: 1px solid #374151; | |
| } | |
| .tab-btn { | |
| padding: 0.5rem 1rem; | |
| cursor: pointer; | |
| color: #9ca3af; | |
| font-weight: 500; | |
| border: none; | |
| background: transparent; | |
| display: flex; | |
| align-items: center; | |
| transition: all 0.2s ease; | |
| } | |
| .tab-btn:hover { | |
| color: #6366f1; | |
| } | |
| .tab-btn.active { | |
| color: #6366f1; | |
| border-bottom: 2px solid #6366f1; | |
| } | |
| .tab-content { | |
| display: none; | |
| padding: 1rem; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| </style> | |
| <div class="tab-group"> | |
| <div class="tab-header"> | |
| <slot name="tabs"></slot> | |
| </div> | |
| <div class="tab-contents"> | |
| <slot name="contents"></slot> | |
| </div> | |
| </div> | |
| `; | |
| // Add click handlers for tabs | |
| setTimeout(() => { | |
| const tabs = this.shadowRoot.querySelectorAll('slot[name="tabs"]').item(0).assignedElements(); | |
| const contents = this.shadowRoot.querySelectorAll('slot[name="contents"]').item(0).assignedElements(); | |
| tabs.forEach((tab, index) => { | |
| tab.addEventListener('click', () => { | |
| // Remove active class from all tabs and contents | |
| tabs.forEach(t => t.classList.remove('active')); | |
| contents.forEach(c => c.classList.remove('active')); | |
| // Add active class to clicked tab and corresponding content | |
| tab.classList.add('active'); | |
| if (contents[index]) { | |
| contents[index].classList.add('active'); | |
| } | |
| }); | |
| // Set first tab as active by default | |
| if (index === 0) { | |
| tab.classList.add('active'); | |
| if (contents[0]) { | |
| contents[0].classList.add('active'); | |
| } | |
| } | |
| }); | |
| }); | |
| } | |
| } | |
| customElements.define('custom-tab-group', CustomTabGroup); |