Impaginazione

href è una funzione dal numero di pagina all’URL, quindi l’impaginazione funziona tanto per /blog/2 quanto per /blog?page=2. È questo che rende ogni pagina un link vero — scansionabile, apribile in una nuova scheda e funzionante senza JavaScript, che è ciò che vuole un sito statico.

Impaginazione di base

pagination({ page: 1, count: 5, href: (page) => '#page-' + page })

Finestra

La prima e l’ultima pagina sono sempre mostrate, più una finestra attorno a quella corrente, con dei puntini di sospensione ovunque la sequenza salti.

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 }),
)

Fratelli

siblings è quante pagine stanno ai due lati di quella corrente.

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 }),
)

Estremità

Il precedente è disattivato sulla prima pagina e il successivo sull’ultima, così il controllo non offre mai una pagina che non esiste.

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 }),
)

Colori ed etichette

stack({ gap: 'md' },
  pagination({ page: 3, count: 6, color: 'neutral', href: (page) => '#j-' + page }),
  pagination({
    page: 3,
    count: 6,
    color: 'success',
    previousLabel: 'Più recenti',
    nextLabel: 'Più vecchi',
    href: (page) => '#k-' + page,
  }),
)

Senza href

Senza href, i numeri vengono renderizzati come pulsanti che portano data-su-page — per una pagina che filtra sul posto con uno script proprio. Quando puoi preferisci i link: sopravvivono a JavaScript disattivato.

pagination({ page: 2, count: 4 })

In un blog

La forma consueta su un sito statico: generateStaticParams produce una pagina per ogni fetta, e href ci punta.

Mostrati 21–30 di 47

return (() => {
  const posts = 47
  const perPage = 10
  const current = 3

  return stack({ gap: 'md', align: 'center' },
    text({ variant: 'small', tone: 'muted' },
      'Mostrati ' + ((current - 1) * perPage + 1) + '–' + Math.min(current * perPage, posts) + ' di ' + posts,
    ),
    pagination({
      page: current,
      count: Math.ceil(posts / perPage),
      href: (page) => page === 1 ? '#blog' : '#blog-' + page,
    }),
  )
})()

Props

Prop	Tipo	Predefinito	Descrizione
`page`	`number`	`1`	La pagina corrente. Riportata nell’intervallo valido.
`count`	`number`	`1`	Quante pagine ci sono.
`href`	`(page: number) => string`	—	Dal numero di pagina all’URL. Senza, le pagine diventano pulsanti.
`siblings`	`number`	`1`	Pagine mostrate ai due lati di quella corrente.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Colore della pagina corrente.
`label`	`string`	`'Pagination'`	Nome accessibile del punto di riferimento nav.
`previousLabel`	`Child`	`'‹'`	Contenuto del controllo precedente.
`nextLabel`	`Child`	`'›'`	Contenuto del controllo successivo.