Wischen zum Erledigen
Eine Listenzeile, die man durch Ziehen nach rechts abhakt und nach links zurücknimmt, auch per Pfeiltasten.
Einstellungen
Code
<label class="uvq02-swp"><input type="checkbox"><span class="bg" aria-hidden="true"><span class="l"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg>Fertig</span><span class="r">Rückgängig</span></span><span class="fg"><span class="dt" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span><span class="tx"><b>Marta antworten</b><small aria-hidden="true">Zum Abhaken wischen</small></span><span class="tm" aria-hidden="true">09:40</span></span></label>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 Checkboxen
Alle ansehen: CheckboxenWofür du ihn nutzen kannst
Aus Mail- und Aufgaben-Apps übernommen, ist diese Checkbox eine ganze Listenzeile mit Statuskreis, Titel, Hinweis und Uhrzeit. Zieht man sie nach rechts, erscheint ein grünes Erledigt-Feld und sie wird abgehakt, nach links erscheint Rückgängig und der Haken verschwindet; ein einfacher Tipp schaltet ebenfalls um. Per Tastatur gehen Pfeiltasten, Leertaste und Enter. Passt zu To-do-Listen, Posteingängen, Liefer-Apps und mobilen Dashboards.
Die Hauptfarbe ist das Erledigt-Feld und der Haken, die Zweitfarbe die Rückgängig-Seite. Die Schwelle liegt bei etwa einem Drittel der Zeilenbreite, so wirkt die Geste auf dem Handy bewusst und bleibt am Desktop gut erreichbar.