Paginación
href es una función que va del número de página a la URL, así que la paginación sirve igual para /blog/2 que para /blog?page=2. Eso hace que cada página sea un enlace de verdad: rastreable, abrible en una pestaña nueva y funcional sin JavaScript, que es lo que quiere un sitio estático.
Paginación básica
pagination({ page: 1, count: 5, href: (page) => '#page-' + page })Ventana
La primera y la última página se muestran siempre, más una ventana alrededor de la actual, con puntos suspensivos allí donde la secuencia da un salto.
stack({ gap: 'md' },
pagination({ page: 1, count: 12, href: (page) => '#a-' + page }),
pagination({ page: 6, count: 12, href: (page) => '#b-' + page }),
pagination({ page: 12, count: 12, href: (page) => '#c-' + page }),
)Hermanas
siblings es cuántas páginas quedan a cada lado de la actual.
stack({ gap: 'md' },
pagination({ page: 6, count: 12, siblings: 0, href: (page) => '#d-' + page }),
pagination({ page: 6, count: 12, siblings: 1, href: (page) => '#e-' + page }),
pagination({ page: 6, count: 12, siblings: 3, href: (page) => '#f-' + page }),
)Extremos
Anterior queda deshabilitado en la primera página y siguiente en la última, así que el control nunca ofrece una página que no existe.
stack({ gap: 'md' },
pagination({ page: 1, count: 3, href: (page) => '#g-' + page }),
pagination({ page: 3, count: 3, href: (page) => '#h-' + page }),
pagination({ page: 1, count: 1, href: (page) => '#i-' + page }),
)Colores y etiquetas
stack({ gap: 'md' },
pagination({ page: 3, count: 6, color: 'neutral', href: (page) => '#j-' + page }),
pagination({
page: 3,
count: 6,
color: 'success',
previousLabel: 'Más nuevas',
nextLabel: 'Más antiguas',
href: (page) => '#k-' + page,
}),
)Sin hrefs
Sin href, los números se dibujan como botones que llevan data-su-page, para una página que filtra en el sitio con su propio script. Prefiere enlaces cuando puedas: sobreviven a que JavaScript esté desactivado.
pagination({ page: 2, count: 4 })En un blog
La forma habitual en un sitio estático: generateStaticParams produce una página por tramo, y href apunta a ellas.
Mostrando 21–30 de 47
return (() => {
const posts = 47
const perPage = 10
const current = 3
return stack({ gap: 'md', align: 'center' },
text({ variant: 'small', tone: 'muted' },
'Mostrando ' + ((current - 1) * perPage + 1) + '–' + Math.min(current * perPage, posts) + ' de ' + posts,
),
pagination({
page: current,
count: Math.ceil(posts / perPage),
href: (page) => page === 1 ? '#blog' : '#blog-' + page,
}),
)
})()Props
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
page | number | 1 | La página actual. Se ajusta al rango. |
count | number | 1 | Cuántas páginas hay. |
href | (page: number) => string | — | Del número de página a la URL. Sin él, las páginas se dibujan como botones. |
siblings | number | 1 | Páginas que se muestran a cada lado de la actual. |
color | 'primary' | 'neutral' | 'success' | 'warning' | 'danger' | 'primary' | Color de la página actual. |
label | string | 'Pagination' | Nombre accesible del punto de referencia nav. |
previousLabel | Child | '‹' | Contenido del control de anterior. |
nextLabel | Child | '›' | Contenido del control de siguiente. |