Resultados
Vista en cuadrícula o lista
Un selector de vista que recoloca las tarjetas de ejemplo entre rejilla y lista con una transición suave.
Ajustes
Código
<div class="uv-fvw"><div class="hd"><p>Resultados</p><div class="sw" role="radiogroup" aria-label="Vista"><label><input type="radio" name="uv-fvw" checked><span aria-label="Cuadrícula"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="4" width="6.5" height="6.5" rx="1.5"/><rect x="13.5" y="4" width="6.5" height="6.5" rx="1.5"/><rect x="4" y="13.5" width="6.5" height="6.5" rx="1.5"/><rect x="13.5" y="13.5" width="6.5" height="6.5" rx="1.5"/></svg></span></label><label><input type="radio" name="uv-fvw"><span aria-label="Lista"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6h11M9 12h11M9 18h11"/><circle cx="4.8" cy="6" r="1.1" fill="currentColor"/><circle cx="4.8" cy="12" r="1.1" fill="currentColor"/><circle cx="4.8" cy="18" r="1.1" fill="currentColor"/></svg></span></label><i class="pl" aria-hidden="true"></i></div></div><ul><li style="--h:210"><i></i><span><b></b><b></b></span></li><li style="--h:160"><i></i><span><b></b><b></b></span></li><li style="--h:20"><i></i><span><b></b><b></b></span></li><li style="--h:280"><i></i><span><b></b><b></b></span></li></ul></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
Catálogos de productos, gestores de archivos y resultados de búsqueda suelen ofrecer dos vistas, y el selector debería enseñar qué cambia. Aquí un pequeño control segmentado con iconos de rejilla y lista desliza una píldora blanca entre las dos opciones, y las tarjetas de abajo se recolocan: las miniaturas se encogen, el texto se pone al lado y el hueco se ajusta.
El cambio de diseño es CSS puro según el radio elegido, con transiciones en la rejilla, el hueco y el tamaño de la miniatura. Pon tus tarjetas con las mismas clases y funcionará sin JavaScript.