Paginare

Prezentare

Oferă URL-uri stabile pentru fiecare pagină de rezultate și indică textual pagina curentă.

Când se folosește

• pentru liste de rezultate împărțite pe mai multe pagini.

Când nu se folosește

• pentru derulare infinită sau liste scurte care încap pe o singură pagină.

Anatomie

Un `<nav class="sd-pagination">` cu `__list` și linkuri (`<a>` pentru paginile navigabile, `<span aria-current="page">` pentru cea curentă), plus `__label` vizual ascuns pentru context.

Variante

• implicit — o singură variantă

Stări

• pagina curentă (`aria-current="page"`, fundal plin)

Comportament

Linkuri native `<a href>`, fiecare pagină o adresă reală, distribuibilă. Sub 40rem lățime, lista devine verticală, printr-un media query. Dispare la tipărire (`display: none`), fără sens pe hârtie.

Reguli de conținut

• fiecare link e un URL real către acea pagină, nu doar un handler JavaScript fără `href`.

Cercetare

• https://github.com/ciprian-rus/sistem.digital/pull/51 (site extern)

Istoric

Structura completă a acestei secțiuni urmează șablonul canonic al paginii unei componente. Accesibilitatea (semantică, tastatură, focus) rămâne documentată separat, conform șablonului de accesibilitate.

Preview și markup canonic

Previzualizarea de mai jos redă exact șirul HTML afișat în exemplul de cod. Nu există o implementare paralelă pentru documentație.

Instalare și importuri

pnpm add @sistem-digital/tokens @sistem-digital/components

@import '@sistem-digital/components/content.css';

<nav class="sd-pagination" aria-label="Paginarea rezultatelor — exemplu content-pagination"><ul class="sd-pagination__list"><li><a href="#">Pagina anterioară</a></li><li><span aria-current="page">Pagina curentă, 2</span></li><li><a href="#">Pagina următoare</a></li></ul></nav>

Contract și surse

• Documentația familiei Conținut și date
• Codul sursă (site extern)
• Changelog (site extern)

Schimbarea claselor publice, a markup-ului canonic sau a comportamentului helperelor necesită versionare și instrucțiuni de migrare.

Matricea design–cod

Disponibilitatea reală a acestei componente, calculată din pachetele publicate, conform schemei matricei design–cod. Rândurile Figma, testare cu tastatura și testare cu cititor de ecran rămân „Indisponibil” până la dovezi publicate separat (kit Figma, respectiv auditul manual de accesibilitate).