ComponentesComponents

PaginaciónPagination

Enlaces a páginas de resultados con anterior y siguiente.Links to result pages with previous and next.

DiseñoDesign: coss ui (MIT) · pagination.tsxMITambos · densidaddensity media · sobriaMarkdownJSON

CódigoCode

<nav class="c-pagination" aria-label="Paginación">
  <ul class="c-pagination__content">
    <li><a class="c-btn c-btn--ghost c-pagination__prev" href="#p1" aria-label="Página anterior"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg><span class="c-pagination__label">Anterior</span></a></li>
    <li><a class="c-btn c-btn--ghost c-btn--icon" href="#p1">1</a></li>
    <li><a class="c-btn c-btn--outline c-btn--icon" href="#p2" aria-current="page">2</a></li>
    <li><a class="c-btn c-btn--ghost c-btn--icon" href="#p3">3</a></li>
    <li><span class="c-pagination__ellipsis" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></span><span class="c-sr-only">Más páginas</span></li>
    <li><a class="c-btn c-btn--ghost c-btn--icon" href="#p10">10</a></li>
    <li><a class="c-btn c-btn--ghost c-pagination__next" href="#p3" aria-label="Página siguiente"><span class="c-pagination__label">Siguiente</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></a></li>
  </ul>
</nav>

«Todo» trae tokens, dependencias y componente en un solo archivo, listo para abrir o dárselo a un agente.“All” bundles tokens, dependencies and the component in one file, ready to open or hand to an agent.

InstalaciónInstallation

  1. Agrega una vezAdd once tokens.css (colores, radios, tema oscuro).(colors, radii, dark theme).
  2. Agrega también:Also add: BotónButton.
  3. Copia los archivos:Copy the files: pagination.html, pagination.css.
  4. Para el tema oscuro, pon la claseFor the dark theme, add the class dark ento <html>.

Cuándo usarloWhen to use it

ÚsaloUse it

  • Cuando una lista se divide en páginas.
  • When a list is split into pages.

Mejor noAvoid

  • Con pocas entradas: muéstralas todas.
  • With few items: show them all.

AccesibilidadAccessibility

navigationlink
TabRecorre las páginasMoves through the pages
  • La página actual lleva aria-current=page.
  • En móvil, anterior y siguiente quedan como iconos con aria-label.
  • The current page has aria-current=page.
  • On mobile, previous and next become icons with aria-label.

Cómo probarloHow to test it

  • El lector dice «2, página actual».
  • The screen reader says “2, current page”.

CréditosCredits