Barra de filtros con etiquetas
Desplegables arriba y, debajo, cada elección se convierte en una etiqueta que se puede quitar con animación.
Ajustes
Código
<div class="uv-ftb"><div class="rw"><div class="dd"><button class="tg">Categoría<i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></button><div class="mn"><button data-v="Diseño">Diseño</button><button data-v="Código">Código</button><button data-v="Fotos">Fotos</button></div></div><div class="dd"><button class="tg">Precio<i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></button><div class="mn"><button data-v="Gratis">Gratis</button><button data-v="Premium">Premium</button></div></div><div class="dd"><button class="tg">Nivel<i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></button><div class="mn"><button data-v="Básico">Básico</button><button data-v="Avanzado">Avanzado</button></div></div></div><div class="tags"></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Filtros
Ver todos: FiltrosDónde usarlo
Buena distribución para catálogos con rejillas anchas, donde una barra lateral robaría espacio. Una plataforma de cursos online, por ejemplo, con Categoría, Precio y Nivel en fila. Cada elección aparece debajo como etiqueta, así se ven y se deshacen los filtros de un vistazo. Responde a quien busca una barra de filtros horizontal con chips eliminables.
Deja fijo el texto de cada desplegable, como «Nivel», y que las etiquetas muestren los valores. Añade un «Borrar todo» cuando haya tres o más. Si la fila se llena, esconde los filtros menos usados tras un botón «Más».