Pagination en piste d'atterrissage
Les pages sont peintes sur une piste vue du ciel : l'avion roule jusqu'à la page choisie et les feux d'approche filent vers lui.
Réglages
Code
<nav class="uvq12-rw" aria-label="Pagination"><p class="rd"><span>Page</span><b class="pn">3</b><small>/ 8</small></p><div class="cs"><button type="button" class="pv" aria-label="Page précédente"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button><div class="rn"><span class="cl" aria-hidden="true"></span><span class="gl" aria-hidden="true"></span><span class="rb" aria-hidden="true"></span><svg class="pl" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z"/></svg><div class="ns"><button type="button" aria-label="Page 1" tabindex="-1">01</button><button type="button" aria-label="Page 2" tabindex="-1">02</button><button type="button" aria-label="Page 3" aria-current="page" tabindex="0">03</button><button type="button" aria-label="Page 4" tabindex="-1">04</button><button type="button" aria-label="Page 5" tabindex="-1">05</button><button type="button" aria-label="Page 6" tabindex="-1">06</button><button type="button" aria-label="Page 7" tabindex="-1">07</button><button type="button" aria-label="Page 8" tabindex="-1">08</button></div></div><button type="button" class="nx" aria-label="Page suivante"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button></div></nav>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Navigation
Voir tout : NavigationOù l’utiliser
Une pagination dessinée comme une piste d'aéroport vue du ciel, avec feux de bord, bandes de seuil et ligne centrale en pointillé. Les numéros sont peints sur l'asphalte, un petit avion roule jusqu'à celui que tu choisis et fait demi-tour quand tu reviens en arrière, et une rampe de feux d'approche court vers lui. Pour les sites de voyage, les galeries et les listes de quelques pages.
La couleur principale teinte les feux verts du seuil et la secondaire l'avion. Huit pages tiennent à l'aise ; change le nombre dans les données et l'avion, les feux et le compteur suivent.