Componente
Pagination
Paginazione a link reali: daisyUI btn-ghost 48×48px con bordo 2px sulla pagina corrente. Sotto i 640px resta visibile solo la pagina corrente.
- Riferimento
<it-pagination>, <it-pagination-item>- Classi
ita-paginationita-pagination-startita-pagination-endita-page-linkita-pagination-text- Basato su (daisyUI)
btnbtn-ghostbtn-disabled- Solo CSS
- La finestra di pagine si calcola lato server (pageWindow) e ogni pagina è un link: nessun evento it-pagination-change, la pagina si ricarica.
- Storybook
- Apri le storie di Pagination
Con pulsanti avanti e indietro
Mostra il codice HTMLNascondi il codice HTML
<nav class="ita-pagination" aria-label="Paginazione">
<ul>
<li><a class="ita-page-link" href="?page=2"><svg class="size-6 shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><polygon points="14.6,17.2 9,11.6 14.6,6 15.4,6.7 10.5,11.6 15.4,16.5" /></svg><span class="sr-only">Pagina precedente</span></a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=1">1</a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=2">2</a></li>
<li><a class="ita-page-link" href="?page=3" aria-current="page"><span class="sm:hidden">Pagina </span>3</a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=4">4</a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=5">5</a></li>
<li><a class="ita-page-link" href="?page=4"><svg class="size-6 shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><polygon points="9.8,17.2 9,16.5 13.9,11.6 9,6.7 9.8,6 15.4,11.6" /></svg><span class="sr-only">Pagina successiva</span></a></li>
</ul>
</nav>Con link testuali
Mostra il codice HTMLNascondi il codice HTML
<nav class="ita-pagination" aria-label="Paginazione">
<ul>
<li><a class="ita-page-link" href="?page=2">Precedente</a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=1">1</a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=2">2</a></li>
<li><a class="ita-page-link" href="?page=3" aria-current="page"><span class="sm:hidden">Pagina </span>3</a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=4">4</a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=5">5</a></li>
<li><a class="ita-page-link" href="?page=4">Successiva</a></li>
</ul>
</nav>Allineamento
Mostra il codice HTMLNascondi il codice HTML
<nav class="ita-pagination ita-pagination-start" aria-label="Paginazione">
<ul>
<li><a class="ita-page-link" href="?page=2"><svg class="size-6 shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><polygon points="14.6,17.2 9,11.6 14.6,6 15.4,6.7 10.5,11.6 15.4,16.5" /></svg><span class="sr-only">Pagina precedente</span></a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=1">1</a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=2">2</a></li>
<li><a class="ita-page-link" href="?page=3" aria-current="page"><span class="sm:hidden">Pagina </span>3</a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=4">4</a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=5">5</a></li>
<li><a class="ita-page-link" href="?page=4"><svg class="size-6 shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><polygon points="9.8,17.2 9,16.5 13.9,11.6 9,6.7 9.8,6 15.4,11.6" /></svg><span class="sr-only">Pagina successiva</span></a></li>
</ul>
<p class="ita-pagination-text">Totale 300 elementi</p>
</nav>
<hr class="my-6 border-base-content/15">
<nav class="ita-pagination" aria-label="Paginazione">
<ul>
<li><a class="ita-page-link" href="?page=2"><svg class="size-6 shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><polygon points="14.6,17.2 9,11.6 14.6,6 15.4,6.7 10.5,11.6 15.4,16.5" /></svg><span class="sr-only">Pagina precedente</span></a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=1">1</a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=2">2</a></li>
<li><a class="ita-page-link" href="?page=3" aria-current="page"><span class="sm:hidden">Pagina </span>3</a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=4">4</a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=5">5</a></li>
<li><a class="ita-page-link" href="?page=4"><svg class="size-6 shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><polygon points="9.8,17.2 9,16.5 13.9,11.6 9,6.7 9.8,6 15.4,11.6" /></svg><span class="sr-only">Pagina successiva</span></a></li>
</ul>
<p class="ita-pagination-text">Totale 300 elementi</p>
</nav>
<hr class="my-6 border-base-content/15">
<nav class="ita-pagination ita-pagination-end" aria-label="Paginazione">
<ul>
<li><a class="ita-page-link" href="?page=2"><svg class="size-6 shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><polygon points="14.6,17.2 9,11.6 14.6,6 15.4,6.7 10.5,11.6 15.4,16.5" /></svg><span class="sr-only">Pagina precedente</span></a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=1">1</a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=2">2</a></li>
<li><a class="ita-page-link" href="?page=3" aria-current="page"><span class="sm:hidden">Pagina </span>3</a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=4">4</a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=5">5</a></li>
<li><a class="ita-page-link" href="?page=4"><svg class="size-6 shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><polygon points="9.8,17.2 9,16.5 13.9,11.6 9,6.7 9.8,6 15.4,11.6" /></svg><span class="sr-only">Pagina successiva</span></a></li>
</ul>
<p class="ita-pagination-text">Totale 300 elementi</p>
</nav>Più pagine
25 di 50, 5 pagine visibili.
Mostra il codice HTMLNascondi il codice HTML
<nav class="ita-pagination" aria-label="Paginazione">
<ul>
<li><a class="ita-page-link" href="?page=24"><svg class="size-6 shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><polygon points="14.6,17.2 9,11.6 14.6,6 15.4,6.7 10.5,11.6 15.4,16.5" /></svg><span class="sr-only">Pagina precedente</span></a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=1">1</a></li>
<li class="hidden sm:block"><span class="ita-page-link" aria-hidden="true">…</span></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=23">23</a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=24">24</a></li>
<li><a class="ita-page-link" href="?page=25" aria-current="page"><span class="sm:hidden">Pagina </span>25</a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=26">26</a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=27">27</a></li>
<li class="hidden sm:block"><span class="ita-page-link" aria-hidden="true">…</span></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=50">50</a></li>
<li><a class="ita-page-link" href="?page=26"><svg class="size-6 shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><polygon points="9.8,17.2 9,16.5 13.9,11.6 9,6.7 9.8,6 15.4,11.6" /></svg><span class="sr-only">Pagina successiva</span></a></li>
</ul>
</nav>Simple mode
Mostra il codice HTMLNascondi il codice HTML
<nav class="ita-pagination" aria-label="Paginazione">
<ul>
<li><a class="ita-page-link" role="link" aria-disabled="true"><svg class="size-6 shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><polygon points="14.6,17.2 9,11.6 14.6,6 15.4,6.7 10.5,11.6 15.4,16.5" /></svg><span class="sr-only">Pagina precedente</span></a></li>
<li><span class="ita-page-link" aria-current="page">1</span></li>
<li class="ita-pagination-text px-2">/</li>
<li><span class="ita-pagination-text px-2">5</span></li>
<li><a class="ita-page-link" href="?page=2"><svg class="size-6 shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><polygon points="9.8,17.2 9,16.5 13.9,11.6 9,6.7 9.8,6 15.4,11.6" /></svg><span class="sr-only">Pagina successiva</span></a></li>
</ul>
</nav>Con selettore pagine e salto a pagina
Mostra il codice HTMLNascondi il codice HTML
<div class="flex flex-col items-center gap-4">
<nav class="ita-pagination" aria-label="Paginazione">
<ul>
<li><a class="ita-page-link" href="?page=1"><svg class="size-6 shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><polygon points="14.6,17.2 9,11.6 14.6,6 15.4,6.7 10.5,11.6 15.4,16.5" /></svg><span class="sr-only">Pagina precedente</span></a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=1">1</a></li>
<li><a class="ita-page-link" href="?page=2" aria-current="page"><span class="sm:hidden">Pagina </span>2</a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=3">3</a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=4">4</a></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=5">5</a></li>
<li class="hidden sm:block"><span class="ita-page-link" aria-hidden="true">…</span></li>
<li class="hidden sm:block"><a class="ita-page-link" href="?page=10">10</a></li>
<li><a class="ita-page-link" href="?page=3"><svg class="size-6 shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><polygon points="9.8,17.2 9,16.5 13.9,11.6 9,6.7 9.8,6 15.4,11.6" /></svg><span class="sr-only">Pagina successiva</span></a></li>
</ul>
</nav>
<div class="flex flex-wrap items-end justify-center gap-6">
<label class="flex items-center gap-2 text-base">Elementi per pagina:
<select class="ita-select w-auto"><option>10/pagina</option><option>20/pagina</option><option>50/pagina</option><option>100/pagina</option></select>
</label>
<form class="join">
<label class="sr-only" for="jump">Vai alla pagina</label>
<input id="jump" name="page" type="number" min="1" max="10" class="ita-input join-item w-28" placeholder="Vai a ...">
<button class="ita-btn ita-btn-primary join-item">Vai</button>
</form>
</div>
</div>