Regione Toscana Design System

Pagination component 

<nav class="rtds-pagination" role="navigation" aria-label="Paginazione">
    <ul class="rtds-pagination__list">

        <li>
            <a class="rtds-pagination__link rtds-pagination__link-button " href="#" aria-label="Pagina iniziale">
                <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#mini--chevron-double-left" />
                </svg>

            </a>
        </li>
        <li>
            <a class="rtds-pagination__link rtds-pagination__link-button" href="#" aria-label="Pagina precedente">
                <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#mini--chevron-left" />
                </svg>

            </a>
        </li>

        <li>
            <a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text " href="#" aria-label="pagina 1">1</a>
        </li>

        <li>
            <a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text  rtds-background-primary rtds-border-primary rtds-text-white hover:rtds-content-01" href="#" aria-label="Pagina corrente, pagina 2" aria-current="true">2</a>
        </li>

        <li>
            <a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text " href="#" aria-label="pagina 3">3</a>
        </li>

        <li>
            <a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text " href="#" aria-label="pagina 4">4</a>
        </li>

        <li>
            <a class="rtds-pagination__link rtds-pagination__link-button" href="#" aria-label="Pagina successiva">
                <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#mini--chevron-right" />
                </svg>

            </a>
        </li>
        <li>
            <a class="rtds-pagination__link rtds-pagination__link-button " href="#" aria-label="Pagina finale">
                <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#mini--chevron-double-right" />
                </svg>

            </a>
        </li>

    </ul>
</nav>
 
<nav class="rtds-pagination{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock %}{% if padding %} {{ padding }}{% endif %}{% if centered %} rtds-justify-center{% endif %}" role="navigation" aria-label="Paginazione">
    <ul class="rtds-pagination__list{% if centered %} rtds-justify-center{% endif %}">
        {% if hasLabels %}
            <li>
                <a class="rtds-pagination__link rtds-pagination__link-text rtds-py-1 rtds-px-2" aria-label="Pagina precedente" href="">Prev</a>
            </li>
        {% else %}
            <li>
                <a class="rtds-pagination__link rtds-pagination__link-button {% if linkClasses %} {{ linkClasses }}{%- endif -%}" href="#" aria-label="Pagina iniziale">
                    {% render '@icon', { id: 'mini--chevron-double-left', size:'rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5'}, true %}
                </a>
            </li>
            <li>
                <a class="rtds-pagination__link rtds-pagination__link-button{% if linkClasses %} {{ linkClasses }}{%- endif -%}" href="#" aria-label="Pagina precedente">
                    {% render '@icon', { id: 'mini--chevron-left', size:'rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5'}, true %}
                </a>
            </li>
        {% endif %}
        {% for item in items %}
            <li>
                <a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text {% if linkClasses %} {{ linkClasses }}{%- endif -%}{% if item.isCurrent %} rtds-background-primary rtds-border-primary rtds-text-white hover:rtds-content-01{% endif %}" href="#" aria-label="{% if item.isCurrent %}Pagina corrente, {% endif %}pagina {{ item.label }}"{% if item.isCurrent %} aria-current="true"{% endif %}>{{ item.label }}</a>
            </li>
        {% endfor %}
        {% if hasLabels %}
            <li>
                <a class="rtds-pagination__link rtds-pagination__link-text rtds-py-1 rtds-px-2" aria-label="Pagina successiva" href="">Next</a>
            </li>
        {% else %}
            <li>
                <a class="rtds-pagination__link rtds-pagination__link-button{% if linkClasses %} {{ linkClasses }}{%- endif -%}" href="#" aria-label="Pagina successiva">
                    {% render '@icon', { id: 'mini--chevron-right', size:'rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5'}, true %}
                </a>
            </li>
            <li>
                <a class="rtds-pagination__link rtds-pagination__link-button {% if linkClasses %} {{ linkClasses }}{%- endif -%}" href="#" aria-label="Pagina finale">
                    {% render '@icon', { id: 'mini--chevron-double-right', size:'rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5'}, true %}
                </a>
            </li>
            
        {% endif %}
    </ul>
</nav>
 
{
  "items": [
    {
      "label": 1
    },
    {
      "label": 2,
      "isCurrent": true
    },
    {
      "label": 3
    },
    {
      "label": 4
    }
  ]
}
  • Content: 
     /**
 * PAGINATION
 *
*/
@layer components {
    .rtds-pagination {
        @apply  rtds-flex rtds-p-2;
    }

    .rtds-pagination__list {
        @apply rtds-flex rtds-gap-2 rtds-flex-wrap;
    }

    .rtds-pagination__link {
        @apply rtds-flex rtds-items-center rtds-justify-center rtds-h-7 md:rtds-h-8 rtds-transition-all;
    }

    .rtds-pagination__link-button {
        @apply rtds-w-7 md:rtds-w-8 rtds-border rtds-rounded rtds-border-gray-01 rtds-bg-white hover:rtds-background-02;
    }

    .rtds-pagination__link-text {
        @apply rtds-text-xs md:rtds-text-sm rtds-font-medium hover:rtds-underline;
    }

    .rtds-pagination--rounded .rtds-pagination__link-button {
        @apply rtds-rounded-full;
    }
}
  • URL: /components/raw/pagination/pagination.css
  • Filesystem Path: components/03-molecules/pagination/pagination.css
  • Size: 731 Bytes

Componente Paginazione

Il componente Paginazione è un elemento molecolare che gestisce la navigazione tra le pagine di un contenuto. Supporta diverse varianti di visualizzazione e offre una navigazione accessibile.

Varianti

  • pagination--rounded: versione con bordi arrotondati
  • pagination--text: versione con etichette testuali invece di icone
  • pagination--centered: versione centrata orizzontalmente

Markup

Il componente utilizza una struttura semantica con:

  • <nav> come contenitore principale con ruolo di navigazione
  • <ul> per la lista degli elementi di paginazione
  • <li> per ogni elemento della lista
  • <a> per i link di navigazione

La struttura base del markup è:

<nav class="rtds-pagination [classi aggiuntive]" role="navigation" aria-label="Paginazione">
  <ul class="rtds-pagination__list">
    <!-- Elementi di navigazione -->
  </ul>
</nav>

Comportamento

  • Supporta la navigazione tra pagine con icone o etichette testuali
  • Include indicatori per la pagina corrente
  • Fornisce navigazione accessibile con attributi ARIA
  • Supporta la centratura orizzontale
  • Gestisce lo stile degli elementi attivi e inattivi

Configurazioni per lo sviluppo (Nunjucks)

I seguenti parametri possono essere utilizzati per configurare il componente:

  • classes: stringa - classi CSS aggiuntive per il componente
  • padding: stringa - classi per il padding
  • centered: booleano - se true, centra la paginazione orizzontalmente
  • hasLabels: booleano - se true, utilizza etichette testuali invece di icone
  • linkClasses: stringa - classi CSS aggiuntive per i link
  • items: array di oggetti - elementi della paginazione
    • isCurrent: booleano - indica se l’elemento è la pagina corrente
    • label: stringa - etichetta dell’elemento

Configurazione YAML

Il file di configurazione supporta le seguenti impostazioni:

  • title: stringa - titolo del componente
  • status: stringa - stato del componente (es. “wip”)
  • context: oggetto - configurazione di default
    • items: array - elementi della paginazione con etichette e stato corrente
  • variants: array - varianti del componente
    • name: stringa - nome della variante
    • context: oggetto - configurazione specifica della variante
      • classes: stringa - classi CSS aggiuntive
      • hasLabels: booleano - utilizzo di etichette testuali
      • centered: booleano - centratura orizzontale

Blocchi

  • classes: blocco per l’inserimento di classi CSS aggiuntive