Pagination en mètre ruban
Fais glisser un mètre ruban jaune avec de l'inertie jusqu'à placer ta page sous le trait rouge, ou avance avec les flèches.
Réglages
Code
<nav class="uvq12-tp" aria-label="Pagination"><p class="rd"><span>Page</span><b class="pn">7</b><small>/ 24</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="vw" role="slider" tabindex="0" aria-label="Page" aria-valuemin="1" aria-valuemax="24" aria-valuenow="7"><div class="tp"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span></div><i class="hl" aria-hidden="true"></i></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 un mètre ruban jaune : on le tire sur le côté, on le lâche et il continue de glisser avec de l'inertie avant de caler la page la plus proche sous un fin trait rouge. Les flèches, le clavier et un clic sur un nombre marchent aussi, et le grand compteur suit. Elle convient aux longues galeries, aux catalogues et aux archives.
La couleur principale teinte le ruban et la secondaire le trait de lecture. Change le nombre de pages dans les données et garde le compteur au-dessus pour savoir toujours où l'on se trouve.