HTML + CSSFiltres
Filtre de notes avec barres
Chaque niveau d'étoiles montre son nombre d'avis, et le cocher colore sa barre et son étoile.
Réglages
16px
1x
Code
<fieldset class="uv-frb"><legend>Note</legend><label style="--w:100%"><input type="checkbox" checked><span class="st" aria-label="5 étoiles">5<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.75 5.6 6.15.9-4.45 4.33 1.05 6.12L12 16.87l-5.5 2.88 1.05-6.12L3.1 9.3l6.15-.9z"/></svg></span><span class="br"><i></i></span><span class="n">412</span></label><label style="--w:65%"><input type="checkbox" checked><span class="st" aria-label="4 étoiles">4<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.75 5.6 6.15.9-4.45 4.33 1.05 6.12L12 16.87l-5.5 2.88 1.05-6.12L3.1 9.3l6.15-.9z"/></svg></span><span class="br"><i></i></span><span class="n">268</span></label><label style="--w:22%"><input type="checkbox"><span class="st" aria-label="3 étoiles">3<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.75 5.6 6.15.9-4.45 4.33 1.05 6.12L12 16.87l-5.5 2.88 1.05-6.12L3.1 9.3l6.15-.9z"/></svg></span><span class="br"><i></i></span><span class="n">91</span></label><label style="--w:8%"><input type="checkbox"><span class="st" aria-label="2 étoiles">2<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.75 5.6 6.15.9-4.45 4.33 1.05 6.12L12 16.87l-5.5 2.88 1.05-6.12L3.1 9.3l6.15-.9z"/></svg></span><span class="br"><i></i></span><span class="n">34</span></label><label style="--w:5%"><input type="checkbox"><span class="st" aria-label="1 étoile">1<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.75 5.6 6.15.9-4.45 4.33 1.05 6.12L12 16.87l-5.5 2.88 1.05-6.12L3.1 9.3l6.15-.9z"/></svg></span><span class="br"><i></i></span><span class="n">19</span></label></fieldset>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
Les filtres d'avis marchent mieux quand on voit combien de résultats chaque choix apporte. Cette liste affiche cinq lignes de cinq à une étoile, chacune avec une barre proportionnelle à son nombre d'avis et le chiffre au bout. Les lignes cochées prennent un fond chaud, une étoile et une barre colorées, on combine donc plusieurs niveaux d'un coup d'œil.
Chaque ligne est un libellé de case sur toute la largeur, avec une grande zone de clic. Remplis largeurs et chiffres avec tes données dans le HTML.