Cómo construir una tabla de precios con un interruptor de palanca CSS mensual/anual

Muestra de interruptores de palanca de precios

Antes de comenzar a construir nuestro interruptor, primero inspirémonos en algunas páginas de precios que usan interruptores de palanca.

1. Comience con el marcado HTML

Definiremos un contenedor que incluirá dos envoltorios anidados: el envoltorio del interruptor y el envoltorio de la tabla.

Dentro del envoltorio del interruptor, colocaremos dos botones de opción seguidos de sus etiquetas asociadas y un botón vacío. span elemento con la clase de highlighter. De manera predeterminada, el primer botón de opción estará marcado.

Vale la pena mencionar que hay diferentes enfoques que podemos seguir para construir el componente. Una implementación alternativa podría ser deshacerse del vacío span y usar pseudo-elementos.

Dentro del envoltorio de la mesa, colocaremos la mesa.

Aquí está el marcado inicial:

La mayor parte del contenido de la tabla y el estilo provendrán de un tutorial anterior donde construimos una tabla de precios con un encabezado fijo. De este tutorial, eliminé todos los estilos innecesarios. También realicé algunos ajustes de estilo para que coincidan con el objetivo de esta demostración. De todos modos, los estilos de tabla son de importancia secundaria.

Para este ejercicio, solo actualizaremos los encabezados de la tabla, por lo que el .info elemento incluirá dos cantidades diferentes dependiendo del plan. Por defecto, solo será visible la cantidad mensual.

Así es como se verá el marcado de un encabezado de tabla:

2. Definir los estilos de interruptor

De manera similar a nuestro componente de interruptor anterior, también aprovecharemos la «técnica de pirateo de casilla de verificación CSS» para alternar el interruptor.

Los estilos de cambio

Ya hay muchas implementaciones de este método en el Tuts+ biblioteca, por lo que no entraré en más detalles. Recomendaría revisar todos estos ejemplos para familiarizarse con la forma de simular JavaScript hacer clic Sin embargo, evento en elementos CSS.

Estos son (brevemente) los pasos que seguiremos:

  • Oculte visualmente los botones de radio.

  • Posicionar absolutamente el .highligher elemento dentro del contenedor.
  • Cada vez que hacemos clic en el interruptor, el .highlighterLa posición de ‘s cambiará gracias a la transform Propiedad CSS. En ese momento, el color de la etiqueta activa también cambiará de negro a blanco.

Aquí están todos los estilos adjuntos a nuestro componente:

3. Alternar información de la tabla con JavaScript

Hasta este punto, hemos creado correctamente el interruptor. Pero, hay una cosa extra que tenemos que hacer; mostrar los precios de mesa relevantes dependiendo de la selección activa.

Para hacer esto, usaremos un poco de JavaScript. Específicamente, cada vez que un usuario cambia el interruptor, haremos lo siguiente:

  • Tome la ID del botón de opción seleccionado.
  • Ocultar todos los elementos de la tabla con la clase de .price.
  • Mostrar solo el .price elementos cuya clase coincida con este ID.

Aquí está el código JavaScript requerido:

Y la clase CSS asociada:

Conclusión

¡Gracias por seguir otro tutorial, amigos! Espero que este ejercicio le haya brindado el conocimiento suficiente para crear un interruptor de palanca solo CSS para filtrar partes de su sitio web o aplicación. Aquí cubrimos cómo usar dicho interruptor como parte de una página de precios; otro caso de uso podría ser cambiar las vistas de diseño (vistas de cuadrícula y lista).

Por supuesto, si necesita crear interruptores con una funcionalidad compleja, probablemente JavaScript sea un mejor enfoque.

Aquí hay un recordatorio de lo que construimos:

Como siempre, ¡muchas gracias por leer!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *