Contactos

A
  • Ana Ruiz
  • Alberto Gil
B
  • Bea Soto
C
  • Carla Vidal
  • Carlos Mena
D
  • Diego Paz
E
  • Elena Ortiz
G
  • Gabriel Ros
I
  • Irene Sanz
J
  • Javier León
L
  • Laura Peña
  • Lucía Martín
M
  • Mario Gómez
  • Marta Cano
N
  • Nuria Vega
P
  • Pablo Rey
R
  • Raúl Díaz
  • Rosa Gil
S
  • Sara Molina
T
  • Tomás Rivas
V
  • Vera Luna
ABCDEFGHIJKLMNOPQRSTUVWXYZ
HTML + CSSNavigation

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

16px
1x

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.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Navigation

Alle ansehen: Navigation

Wofü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.