Web Toolkit

image/svg+xml GitHub

Pager: Responsive 

<nav role="navigation" aria-label="Navigazione paginata" class="u-layout-prose">
    <ul class="Grid Grid--fit Grid--alignMiddle u-text-r-xxs">
        <li class="Grid-cell u-textCenter">
            <a href="#" class="u-color-50 u-textClean u-block" title="Pagina precedente">
        <span class="Icon-chevron-left u-text-r-s" role="presentation"></span>
        <span class="u-hiddenVisually">Pagina precedente</span>
      </a>
        </li>
        <li class="Grid-cell u-textCenter u-hidden u-md-inlineBlock u-lg-inlineBlock">
            <a href="/page-1" aria-label="Pagina 1" class="u-padding-r-all u-color-50 u-textClean u-block">
        <span class="u-text-r-m">1</span>
      </a>
        </li>
        <li class="Grid-cell u-textCenter u-hidden u-md-inlineBlock u-lg-inlineBlock" aria-hidden="true">
            <span class="u-padding-r-all u-block u-color-50">
        <span class="u-text-r-m">...</span>
            </span>
        </li>
        <li class="Grid-cell u-textCenter">
            <span class="u-padding-r-all u-block u-background-50 u-color-white">
        <span class="u-text-r-s"><span class="u-md-hidden u-lg-hidden">Pagina</span> 11</span>
            </span>
        </li>

        <li class="Grid-cell u-textCenter u-hidden u-md-inlineBlock u-lg-inlineBlock">
            <a href="#page-12" aria-label="Pagina 12" class="u-padding-r-all u-color-50 u-textClean u-block">
        <span class="u-text-r-s">12</span>
      </a>
        </li>

        <li class="Grid-cell u-textCenter u-hidden u-md-inlineBlock u-lg-inlineBlock">
            <a href="#page-13" aria-label="Pagina 13" class="u-padding-r-all u-color-50 u-textClean u-block">
        <span class="u-text-r-s">13</span>
      </a>
        </li>

        <li class="Grid-cell u-textCenter">
            <a href="#" class="u-padding-r-all u-color-50 u-textClean u-block" title="Pagina successiva">
        <span class="Icon-chevron-right u-text-r-s" role="presentation"></span>
        <span class="u-hiddenVisually">Pagina successiva</span>
      </a>
        </li>
    </ul>
</nav>

Requisiti per la paginazione

  • l’area cliccabile dei link utilizzati per la paginazione deve essere sufficientemente ampia a ogni risoluzione (>= 40px)
  • auspicabilmente, il numero dei link deve poter esser contenuto in un’unica riga anche sugli schermi più piccoli (es. <= 5)
  • il link che indica la pagina corrente deve differire visibilmente dagli altri
  • nella maggior parte dei casi è utile avere un link alla prima pagina sempre visibile (almeno su desktop)
  • non è necessario mostrare un link all’ultima pagina