Cómo construir un componente de tab sensible con CSS y un toque de JavaScript

Spanish (Español) translation by Richter Domagas (you can also view the original English article)

En este tutorial, aprenderemos cómo crear un componente sensible tab con CSS y un poco de JavaScript. Es absolutamente posible crear componentes de ficha CSS puros, pero para este ejemplo vamos a concretar nuestras capacidades de JavaScript.

Aquí es lo que vamos a construir, en unos grandes pasos:

Please accept marketing cookies to load this content.

Nota: Este tutorial no centrarse en cómo hacer accesible, el componente de la tab para explorar la accesibilidad sería un paso válido.

1. El HTML

Para comenzar con, vamos a examinar el marcado requerido. Tenemos un contenedor que incluye las tabs propias (elementos de la lista), así como el contenido de cada tab (tab panels). Para asociar una tab con el correspondiente panel utilizamos el atributo personalizado de data-index que contiene un valor único para cada tab panel. Dicho esto, debido a la numeración de base cero, un panel con data-index = 0 se asocia con la primera tab, un panel con data-index = 1 está asociado con la segunda y así sucesivamente.

Aquí está el código HTML:

<div class="tabs-container">
  <ul class="tabs">
    <li class="active">
      <a href="">Part 1</a>
    </li>
    <li>
      <a href="">Part 2</a>
    </li>
    <li>
      <a href="">Part 3</a>
    </li>
  </ul>
  <div class="tabs-content">
    <div class="tabs-panel active" data-index="0">
      <!-- content here -->
    </div>
    <div class="tabs-panel" data-index="1">
      <!-- content here -->
    </div>
    <div class="tabs-panel" data-index="2">
      <!-- content here -->
    </div>
  </div>
</div>

2. El CSS

Como siguiente paso vamos a especificar unas reglas CSS de nuestro componente. Nada apetece demasiado, sólo algunos estilos básicos. Una cosa a notar es que no utiliza cualquier transiciones (por ejemplo, descolorarse, diapositivas) para alternar entre los tab panels; en cambio estos aparecen y desaparecen con un simple interruptor de encendido / apagado.

Aquí están los estilos iniciales:

.tabs-container {
  max-width: 1000px;
  margin: 50px auto;
  padding: 25px;
}

.tabs {
  display: flex;
}

.tabs li:not(:last-child) {
  margin-right: 7px;
}

.tabs li a {
  display: block;
  position: relative;
  top: 4px;
  padding: 10px 25px;
  border-radius: 2px 2px 0 0;
  background: white;
  opacity: 0.7;
  transition: all 0.1s ease-in-out;
}

.tabs li.active a,
.tabs li a:hover {
  opacity: 1;
  top: 0;
}

.tabs-content {
  position: relative;
  z-index: 2;
  padding: 25px;
  border-radius: 0 4px 4px 4px;
  background: white;
}

.tabs-panel {
  display: none;
}

.tabs-panel.active {
  display: block;
}

3. El JavaScript

Con el HTML y CSS en su lugar, es hora de mirar el código JavaScript necesario.

Cada vez que haga clic en una tab, hacemos lo siguiente:

Retire la active class de la tab correspondiente (por default el primero de ellos) y el panel de la tab panel (por default el primero de ellos).
Encontrar al li parent de esta tab, se agregue la active class y recuperar su index.
Encontrar el tab panel cuyo valor de attribute (para el attribute de data-index) coincide con el valor del mencionado index y asignarle la active class.

Aquí está el código JavaScript resultante:

const tabLinks = document.querySelectorAll(".tabs a");
const tabPanels = document.querySelectorAll(".tabs-panel");

for(let el of tabLinks) {
  el.addEventListener("click", e => {
    e.preventDefault();
    
    document.querySelector('.tabs li.active').classList.remove("active");
    document.querySelector('.tabs-panel.active').classList.remove("active");

    const parentListItem = el.parentElement;
    parentList.classList.add("active");
    const index = [...parentListItem.parentElement.children].indexOf(parentListItem);
    
    const panel = [...tabPanels].filter(el => el.getAttribute("data-index") == index);
    panel[0].classList.add("active");
  });
}

4. Capacidad de respuesta que va

¡Nuestro componente está casi listo! El último que tenemos que hacer es hacer el componente sensible. Así, por ejemplo, cuando la viewport tiene un ancho máximo de 600px, debe contraer y parecerse a esto:

How the tab component looks like on small screens

Como estamos utilizando un enfoque de primer escritorio, estas son las reglas CSS que tenemos que sobrescribir:

@media screen and (max-width: 600px) {
  .tabs {
    flex-direction: column;
  }
    
  .tabs li {
    width: 100%;
  }
    
  .tabs li:not(:last-child) {
    margin-right: 0;
  }
    
  .tabs li a {
    border-radius: 0;
    opacity: 1;
    top: 0;
  }
    
  .tabs li.active a::before {
    content: '•';
    padding-right: 5px;
  }
    
  .tabs-content {
    border-radius: 0;
  }
}

5. Soporte del navegador

Nuestra un demo funciona bien en todos los dispositivos y navegadores recientes. Como de costumbre con mis tutoriales, utilizamos Babel para compilar el código ES6 hasta ES5.

Please accept marketing cookies to load this content.

Conclusión

En este breve tutorial, hemos conseguido crear un componente de la tab de respuesta útil con HTML, CSS y JavaScript. Otra vez, este componente no es adecuadamente accesible, pero si usted quiere mejorar su funcionalidad que sería un buen paso. ¡Feliz codificación!

1	.tabs-container {
2	max-width: 1000px;
3	margin: 50px auto;
4	padding: 25px;
5	}
6
7	.tabs {
8	display: flex;
9	}
10
11	.tabs li:not(:last-child) {
12	margin-right: 7px;
13	}
14
15	.tabs li a {
16	display: block;
17	position: relative;
18	top: 4px;
19	padding: 10px 25px;
20	border-radius: 2px 2px 0 0;
21	background: white;
22	opacity: 0.7;
23	transition: all 0.1s ease-in-out;
24	}
25
26	.tabs li.active a,
27	.tabs li a:hover {
28	opacity: 1;
29	top: 0;
30	}
31
32	.tabs-content {
33	position: relative;
34	z-index: 2;
35	padding: 25px;
36	border-radius: 0 4px 4px 4px;
37	background: white;
38	}
39
40	.tabs-panel {
41	display: none;
42	}
43
44	.tabs-panel.active {
45	display: block;
46	}