Sternefilter mit Balken
Jede Sternestufe zeigt ihre Anzahl an Bewertungen, beim Anhaken färben sich Balken und Stern.
Einstellungen
Code
<fieldset class="uv-frb"><legend>Bewertung</legend><label style="--w:100%"><input type="checkbox" checked><span class="st" aria-label="5 Sterne">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 Sterne">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 Sterne">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 Sterne">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 Stern">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 für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Filter
Alle ansehen: FilterWofür du ihn nutzen kannst
Bewertungsfilter funktionieren besser, wenn man sieht, wie viele Ergebnisse jede Wahl bringt. Diese Liste zeigt fünf Zeilen von fünf bis einem Stern, jede mit einem Balken passend zur Anzahl der Bewertungen und der Zahl am Ende. Angehakte Zeilen bekommen einen warmen Hintergrund sowie farbigen Stern und Balken, mehrere Stufen lassen sich so auf einen Blick kombinieren.
Jede Zeile ist ein Checkbox-Label über die volle Breite mit großer Klickfläche. Breiten und Zahlen kommen aus deinen Daten im HTML, die Hauptfarbe füllt die Balken und die zweite färbt den Hintergrund.