Volver al inicio

Tabs Component

Un componente web personalizado para crear pestañas interactivas con contenido dinámico y opciones de personalización flexible.

Fácil de implementar
Personalizable
Contenidos sincronizados

Ejemplos de uso

Pestañas básicas

Información del producto

Este componente de pestañas proporciona una forma elegante y sencilla de organizar contenido en secciones.

Características principales

  • Implementación sencilla
  • Personalización completa
  • Navegación accesible

Reseñas de usuarios

★★★★★

"Excelente componente."

Código HTML

<!-- Importar el componente -->
<script src="tabs-component/index.js"></script>
<link rel="stylesheet" href="tabs-component/index.css">

<!-- Implementación básica -->
<tabs-component>
  <div class="tabs-component-buttons">
    <div class="tabs-component-buttons-wrapper">
      <button type="button" class="tabs-component-button active" data-tab-button>
        Pestaña 1
      </button>
      <button type="button" class="tabs-component-button" data-tab-button>
        Pestaña 2
      </button>
    </div>
  </div>

  <div class="tabs-component-contents">
    <div class="tabs-component-content active" data-tab-content>
      Contenido de la pestaña 1
    </div>
    <div class="tabs-component-content" data-tab-content>
      Contenido de la pestaña 2
    </div>
  </div>
</tabs-component>

Pestañas con nombres personalizados

Descripción completa

El componente de pestañas permite asignar nombres personalizados a cada pestaña y su contenido correspondiente.

Especificaciones técnicas

Peso: Ligero (menos de 2KB)
Dependencias: Ninguna

Información de garantía

Este componente incluye soporte técnico gratuito y actualizaciones periódicas.

Código HTML

<!-- Pestañas con nombres personalizados -->
<tabs-component>
  <div class="tabs-component-buttons">
    <div class="tabs-component-buttons-wrapper">
      <button type="button" class="tabs-component-button active" data-tab-button="descripcion">
        Descripción
      </button>
      <button type="button" class="tabs-component-button" data-tab-button="especificaciones">
        Especificaciones
      </button>
    </div>
  </div>

  <div class="tabs-component-contents">
    <div class="tabs-component-content active" data-tab-content="descripcion">
      Contenido de la descripción
    </div>
    <div class="tabs-component-content" data-tab-content="especificaciones">
      Contenido de las especificaciones
    </div>
  </div>
</tabs-component>

Contenidos sincronizados

Plan Básico

Precio: Gratis

Plan Estándar

Precio: $9.99/mes

Plan Premium

Precio: $19.99/mes

Características incluidas:

  • Componente básico
  • Documentación estándar
  • Todo lo del plan básico
  • Soporte prioritario
  • Todo lo del plan estándar
  • Soporte 24/7

Recomendado para:

Desarrolladores individuales

Equipos de desarrollo

Empresas

Código HTML

<!-- Contenidos sincronizados -->
<tabs-component data-aditional-contents="data-tab-related, data-tab-extra">
  <!-- Botones de pestañas -->
  <div class="tabs-component-buttons">
    <div class="tabs-component-buttons-wrapper">
      <button type="button" class="tabs-component-button active" data-tab-button="basico">
        Plan Básico
      </button>
      <button type="button" class="tabs-component-button" data-tab-button="premium">
        Plan Premium
      </button>
    </div>
  </div>

  <!-- Contenido principal -->
  <div class="tabs-component-contents">
    <div class="tabs-component-content active" data-tab-content="basico">
      Contenido del plan básico
    </div>
    <div class="tabs-component-content" data-tab-content="premium">
      Contenido del plan premium
    </div>
  </div>

  <!-- Contenido relacionado (se sincroniza) -->
  <div class="contenido-adicional">
    <div class="active" data-tab-related="basico">
      Contenido relacionado del plan básico
    </div>
    <div data-tab-related="premium">
      Contenido relacionado del plan premium
    </div>
  </div>

  <!-- Contenido extra (también se sincroniza) -->
  <div class="otro-contenido">
    <div class="active" data-tab-extra="basico">
      Contenido extra del plan básico
    </div>
    <div data-tab-extra="premium">
      Contenido extra del plan premium
    </div>
  </div>
</tabs-component>

Personalización avanzada

Personalización de diseño

El componente puede personalizarse completamente mediante CSS.

Personalización de funcionalidad

Puedes personalizar el comportamiento del componente mediante eventos y atributos.

Personalización de animaciones

Puedes añadir animaciones personalizadas para mejorar la experiencia de usuario.

CSS personalizado

/* Personalización de estilo */
#example-4-custom .tabs-component-buttons-wrapper {
  background: linear-gradient(to right, #4a00e0, #8e2de2);
  border-radius: 8px 8px 0 0;
  padding: 8px 8px 0 8px;
  border-bottom: 0;;
}

#example-4-custom .tabs-component-buttons-wrapper {
  margin: 0;
}

#example-4-custom .tabs-component-button {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  border-radius: 8px 8px 0 0;
  padding: 12px 20px;
  transition: all 0.3s ease;
}

#example-4-custom .tabs-component-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

#example-4-custom .tabs-component-button.active {
  color: #4a00e0;
  background-color: #fff;
}

#example-4-custom .tabs-component-button.active::after {
  display: none;
}

#example-4-custom .tabs-component-content {
  background-color: #fff;
  color: #333;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Personalización de animaciones */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#example-4-custom .tabs-component-content.active {
  animation: slideIn 0.3s ease-out;
}

JavaScript

// Escuchar eventos de cambio de pestaña
document.querySelector('tabs-component')
  .addEventListener('tab-changed', (event) => {
    console.log('Pestaña activa:', event.detail.tabName);
  });

// Seleccionar una pestaña programáticamente
document.querySelector('tabs-component')
  .selectTabByName('funcionalidad');
Ver documentación completa