Contactos
A
- ARAna Ruiz
- AGAlberto Gil
B
- BSBea Soto
C
- CVCarla Vidal
- CMCarlos Mena
D
- DPDiego Paz
E
- EOElena Ortiz
G
- GRGabriel Ros
I
- ISIrene Sanz
J
- JLJavier León
L
- LPLaura Peña
- LMLucía Martín
M
- MGMario Gómez
- MCMarta Cano
N
- NVNuria Vega
P
- PRPablo Rey
R
- RDRaúl Díaz
- RGRosa Gil
S
- SMSara Molina
T
- TRTomás Rivas
V
- VLVera Luna
Wischbares A-bis-Z-Register
Eine Kontaktliste mit A-bis-Z-Leiste: Fahr mit dem Finger über die Buchstaben, und eine Blase zeigt, wohin du springst.
Einstellungen
Code
<div class="uvq12-az"><p class="tt">Kontakte</p><div class="bx"><div class="ls" tabindex="0" aria-label="Kontakte"><section data-l="A"><h5>A</h5><ul><li><i style="--h:#e11d48" aria-hidden="true">AR</i>Ana Ruiz</li><li><i style="--h:#eab308" aria-hidden="true">AG</i>Alberto Gil</li></ul></section><section data-l="B"><h5>B</h5><ul><li><i style="--h:#0ea5e9" aria-hidden="true">BS</i>Bea Soto</li></ul></section><section data-l="C"><h5>C</h5><ul><li><i style="--h:#f97316" aria-hidden="true">CV</i>Carla Vidal</li><li><i style="--h:#f97316" aria-hidden="true">CM</i>Carlos Mena</li></ul></section><section data-l="D"><h5>D</h5><ul><li><i style="--h:#f97316" aria-hidden="true">DP</i>Diego Paz</li></ul></section><section data-l="E"><h5>E</h5><ul><li><i style="--h:#eab308" aria-hidden="true">EO</i>Elena Ortiz</li></ul></section><section data-l="G"><h5>G</h5><ul><li><i style="--h:#f97316" aria-hidden="true">GR</i>Gabriel Ros</li></ul></section><section data-l="I"><h5>I</h5><ul><li><i style="--h:#e11d48" aria-hidden="true">IS</i>Irene Sanz</li></ul></section><section data-l="J"><h5>J</h5><ul><li><i style="--h:#f97316" aria-hidden="true">JL</i>Javier León</li></ul></section><section data-l="L"><h5>L</h5><ul><li><i style="--h:#eab308" aria-hidden="true">LP</i>Laura Peña</li><li><i style="--h:#a855f7" aria-hidden="true">LM</i>Lucía Martín</li></ul></section><section data-l="M"><h5>M</h5><ul><li><i style="--h:#f97316" aria-hidden="true">MG</i>Mario Gómez</li><li><i style="--h:#eab308" aria-hidden="true">MC</i>Marta Cano</li></ul></section><section data-l="N"><h5>N</h5><ul><li><i style="--h:#0ea5e9" aria-hidden="true">NV</i>Nuria Vega</li></ul></section><section data-l="P"><h5>P</h5><ul><li><i style="--h:#e11d48" aria-hidden="true">PR</i>Pablo Rey</li></ul></section><section data-l="R"><h5>R</h5><ul><li><i style="--h:#e11d48" aria-hidden="true">RD</i>Raúl Díaz</li><li><i style="--h:#eab308" aria-hidden="true">RG</i>Rosa Gil</li></ul></section><section data-l="S"><h5>S</h5><ul><li><i style="--h:#f97316" aria-hidden="true">SM</i>Sara Molina</li></ul></section><section data-l="T"><h5>T</h5><ul><li><i style="--h:#22c55e" aria-hidden="true">TR</i>Tomás Rivas</li></ul></section><section data-l="V"><h5>V</h5><ul><li><i style="--h:#22c55e" aria-hidden="true">VL</i>Vera Luna</li></ul></section></div><div class="rl" role="slider" tabindex="0" aria-label="Inhalt" aria-valuemin="0" aria-valuemax="25" aria-valuenow="0" aria-valuetext="A"><span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span class="no">F</span><span>G</span><span class="no">H</span><span>I</span><span>J</span><span class="no">K</span><span>L</span><span>M</span><span>N</span><span class="no">O</span><span>P</span><span class="no">Q</span><span>R</span><span>S</span><span>T</span><span class="no">U</span><span>V</span><span class="no">W</span><span class="no">X</span><span class="no">Y</span><span class="no">Z</span><b class="bb" aria-hidden="true"><span>A</span></b></div></div></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 Navigation
Alle ansehen: NavigationWofür du ihn nutzen kannst
Das Alphabetregister aus den Kontakten am Handy: Eine Buchstabenleiste läuft an der Seite entlang, und wer mit Finger oder Maus darüberfährt, lässt die Liste zu diesem Buchstaben springen, während eine tropfenförmige Blase den Buchstaben neben dem Finger zeigt. Buchstaben ohne Einträge sind abgeblendet, Überschriften bleiben beim Scrollen oben kleben, und per Tastatur arbeitet die Leiste als Schieberegler.
Die Hauptfarbe färbt Buchstaben und Blase, die Zweitfarbe die klebenden Überschriften. Sortiere deine Daten alphabetisch, die leeren Buchstaben ergeben sich daraus von selbst, und neue Namen ordnen sich automatisch ein.