Regione Toscana Design System

Pagination component: Text 

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

        <li>
            <a class="rtds-pagination__link rtds-pagination__link-text rtds-py-1 rtds-px-2" aria-label="Pagina precedente" href="">Prev</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-text rtds-py-1 rtds-px-2" aria-label="Pagina successiva" href="">Next</a>
        </li>

    </ul>
</nav>
 
{% extends "@pagination" %}
{% block classes %}{{  super() }} rtds-pagination--text{% endblock classes %}
 
{
  "items": [
    {
      "label": 1
    },
    {
      "label": 2,
      "isCurrent": true
    },
    {
      "label": 3
    },
    {
      "label": 4
    }
  ],
  "classes": "rtds-pagination--text",
  "hasLabels": true
}
  • 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