Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. JavaScript
Webdesign

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

by
Difficulty:IntermediateLength:ShortLanguages:

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:

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:

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:

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:

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:

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.

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!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.