Resultados
Bascule vue grille ou liste
Un sélecteur de vue qui réorganise les cartes d'exemple entre grille et liste avec une transition douce.
Réglages
Code
<div class="uv-fvw"><div class="hd"><p>Résultats</p><div class="sw" role="radiogroup" aria-label="Vue"><label><input type="radio" name="uv-fvw" checked><span aria-label="Grille"><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="Liste"><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 pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Filtres
Voir tout : FiltresOù l’utiliser
Catalogues produits, gestionnaires de fichiers et résultats de recherche proposent souvent deux vues, et la bascule doit montrer ce qui change. Ici, un petit contrôle segmenté à icônes grille et liste fait glisser une pilule blanche entre les deux options, et les cartes en dessous se réorganisent : les vignettes rétrécissent, le texte passe à côté et l'espacement se resserre.
Le changement de mise en page est du pur CSS piloté par le radio choisi, avec des transitions sur la grille, l'espacement et la vignette. Il fonctionne sans JavaScript.