Lupe, die sich in Schließen verwandelt
Die Lupe streckt sich zum Suchfeld, ihr Griff zeichnet ein X zum Schließen; Escape funktioniert ebenfalls.
Einstellungen
Code
<div class="uv-msm"><form class="f" role="search"><input type="search" placeholder="Im Shop suchen" aria-label="Im Shop suchen" tabindex="-1"><button type="button" class="b" aria-expanded="false" aria-label="Suche öffnen"><svg viewBox="0 0 24 24" aria-hidden="true"><circle class="c" cx="10" cy="10" r="6"/><path class="h" d="M5 5l14 14"/><path class="x" d="M19 5L5 19"/></svg></button></form></div>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 Mikrointeraktionen
Alle ansehen: MikrointeraktionenWofür du ihn nutzen kannst
Ein kompakter Sucheinstieg für Kopfzeilen mit wenig Platz. Ein Klick auf den runden Knopf weitet ihn zu einem ganzen Feld mit farbigem Ring, während sich die Linse abwickelt und der Griff zu einer Diagonale wird, die mit einem zweiten Strich ein Schließen Symbol zeichnet. Ein weiterer Klick kehrt alles um.
Die Verwandlung nutzt Strichversatz auf einfachen SVG Linien und bleibt so in jeder Größe scharf. Der Knopf liefert aria-expanded und eine wechselnde Beschriftung, das Feld erhält beim Öffnen den Fokus, und Escape schließt es und gibt den Fokus an den Knopf zurück.