viernes 19 julio 2024

Creación de un Dropdown en Tailwind CSS

Estructura HTML
CSS Personalizado
Comportamiento Hover
Ejemplo Completo
Conclusión

Estructura HTML

Primero, analizaremos el código HTML del dropdown. La estructura básica incluye un botón que, al hacer clic o pasar el ratón sobre él, revela una lista de opciones.

<div class="p-10">

  <div class="dropdown inline-block relative">
    <button class="bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded inline-flex items-center">
      <span class="mr-1">Ejemplo de Dropdown</span>
      <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
        <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
      </svg>
    </button>
    <ul class="dropdown-menu absolute hidden text-gray-700 pt-1">
      <li class=""><a class="rounded-t bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">Opción 1</a></li>
      <li class=""><a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">Opción 2</a></li>
    </ul>
  </div>

</div>

CSS Personalizado

Para que el menú desplegable funcione, debemos agregar una pequeña porción de CSS personalizado que revele el menú cuando se pasa el ratón sobre el botón.

.dropdown:hover .dropdown-menu {
  display: block;
}

Explicación del Código

Contenedor Principal: <div class="p-10"> envuelve todo el contenido con un padding de 10 unidades, separando visualmente el dropdown de los bordes de la página.
Dropdown Contenedor: <div class="dropdown inline-block relative"> define un contenedor relativo para el dropdown, permitiendo que el menú se posicione correctamente dentro de este contenedor.
Botón del Dropdown: <button class="bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded inline-flex items-center"> es el botón que muestra el dropdown. Las clases de Tailwind CSS aplicadas aquí:
bg-gray-300: establece el fondo gris del botón.
text-gray-700: establece el color del texto en gris oscuro.
font-semibold: hace que el texto sea semi-negrita.
py-2 px-4: agrega padding vertical y horizontal.
rounded: redondea los bordes del botón.
inline-flex items-center: centra los elementos hijos (texto y icono) horizontal y verticalmente.
Icono del Dropdown: <svg class="fill-current h-4 w-4" ... > es un ícono SVG que representa una flecha hacia abajo. La clase fill-current hace que el color del ícono coincida con el color del texto del botón, mientras que h-4 w-4 establece su altura y anchura.
Menú del Dropdown: <ul class="dropdown-menu absolute hidden text-gray-700 pt-1"> es el contenedor de la lista de opciones del dropdown. Las clases aplicadas aquí:
absolute: posiciona el menú absolutamente respecto al contenedor padre.
hidden: oculta el menú por defecto.
text-gray-700: establece el color del texto en gris oscuro.
pt-1: agrega un pequeño padding en la parte superior.
Opciones del Dropdown: Cada <li> contiene un enlace (<a>) que representa una opción en el menú. Las clases aplicadas:
bg-gray-200 hover:bg-gray-400: establece un fondo gris claro y cambia a gris oscuro al pasar el ratón.
py-2 px-4: agrega padding vertical y horizontal.
block whitespace-no-wrap: hace que el enlace se comporte como un bloque y evita que el texto se ajuste en varias líneas.

Comportamiento Hover

La regla CSS personalizada dropdown:hover .dropdown-menu { display: block; } hace que el menú se muestre cuando el usuario pasa el ratón sobre el contenedor .dropdown. Sin esta regla, el menú permanecería oculto.

Ejemplo Completo

Combina el HTML y el CSS para ver el ejemplo completo en acción:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dropdown con Tailwind CSS</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <style>
    .dropdown:hover .dropdown-menu {
      display: block;
    }
  </style>
</head>
<body class="bg-gray-100">

<div class="p-10">
  <div class="dropdown inline-block relative">
    <button class="bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded inline-flex items-center">
      <span class="mr-1">Ejemplo de Dropdown</span>
      <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
        <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
      </svg>
    </button>
    <ul class="dropdown-menu absolute hidden text-gray-700 pt-1">
      <li class=""><a class="rounded-t bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">Opción 1</a></li>
      <li class=""><a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">Opción 2</a></li>
    </ul>
  </div>
</div>

</body>
</html>

Ejemplo en codepen:

Conclusión

Con Tailwind CSS, crear componentes interactivos como un menú desplegable es sencillo y eficiente. Utilizando clases de utilidad, puedes diseñar rápidamente interfaces de usuario sin tener que escribir mucho CSS personalizado. Este ejemplo demuestra cómo estructurar y estilizar un dropdown básico, proporcionando una base sólida para personalizaciones y expansiones futuras.

Etiquetas:

tailwind css diseño desarrollo web

Creado por:

Jorge García

Fullstack developer