Tab Component

Contenido de la pestaña 1

Contenido de la pestaña 2

Contenido de la pestaña 3

html

<app-tab>
  <button data-target="#tab1">Pestaña 1</button>
  <button data-target="#tab2">Pestaña 2</button>
  <button data-target="#tab3">Pestaña 3</button>
</app-tab>
<div>
  <section id="tab1">Contenido de la pestaña 1</section>
  <section id="tab2">Contenido de la pestaña 2</section>
  <section id="tab3">Contenido de la pestaña 3</section>
</div>

Contenido de la pestaña 2

html

<app-tab>
  <button data-target="/tab1.html">Pestaña 1</button>
  <button data-target="/tab2.html" data-active="true">Pestaña 2</button>
  <button data-target="/tab3.html">Pestaña 3</button>
</app-tab>
<section>Contenido de la pestaña 2</section>

Los archivos fuente deben estar ambos en la misma carpeta (por ejemplo, /tab).

JavaScript:: tab.js
CSS:: tab.css

Para usarlo en la página hay que copiar el siguiente código:

javascript

import {TabComponent} from '/tab/tab.js';
customElements.define('app-tab', TabComponent);

Para personalizar el componente se pueden modificar las siguientes variables CSS:

css

app-tab {
  --tab-margin: [margin-value];
  --tab-border-color: [color-value];
  --tab-item-font-size:[font-size-value];
  --tab-item-font-family: [font-family-value];
  --tab-item-color: [color-value];
  --tab-item-font-weight: [font-weight-value];
  --tab-item-background-color: [color-value];
  --tab-item-active-color: [color-value];
  --tab-item-active-background-color: [color-value];
  --tab-item-active-font-weight: [font-weight-value];
  --tab-item-hover-color: [color-value];
  --tab-item-hover-background-color: [color-value];
}