Paginierung

href ist eine Funktion von Seitenzahl zu URL, deshalb funktioniert die Paginierung für /blog/2 genauso wie für /blog?page=2. Damit ist jede Seite ein echter Link — crawlbar, in einem neuen Tab zu öffnen und ohne JavaScript funktionsfähig, also genau das, was eine statische Website will.

Einfache Paginierung

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

Fenster

Die erste und die letzte Seite werden immer gezeigt, dazu ein Fenster um die aktuelle, mit Auslassungspunkten überall dort, wo die Folge springt.

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

Nachbarn

siblings ist die Anzahl der Seiten, die zu beiden Seiten der aktuellen stehen.

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

Ränder

Zurück ist auf der ersten Seite deaktiviert und Weiter auf der letzten, sodass das Steuerelement nie eine Seite anbietet, die es nicht gibt.

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

Farben und Beschriftungen

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

Ohne hrefs

Ohne href werden die Zahlen als Buttons mit data-su-page gerendert — für eine Seite, die mit eigenem Skript an Ort und Stelle filtert. Nimm nach Möglichkeit Links: sie überleben abgeschaltetes JavaScript.

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

In einem Blog

Die übliche Form auf einer statischen Website: generateStaticParams erzeugt eine Seite pro Abschnitt, und href zeigt darauf.

Zeige 21–30 von 47

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

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

Props

Prop	Typ	Standard	Beschreibung
`page`	`number`	`1`	Die aktuelle Seite. Wird in den gültigen Bereich geklemmt.
`count`	`number`	`1`	Wie viele Seiten es gibt.
`href`	`(page: number) => string`	—	Seitenzahl zu URL. Ohne sie werden Seiten als Buttons gerendert.
`siblings`	`number`	`1`	Seiten, die zu beiden Seiten der aktuellen gezeigt werden.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Farbe der aktuellen Seite.
`label`	`string`	`'Pagination'`	Zugänglicher Name des nav-Landmarks.
`previousLabel`	`Child`	`'‹'`	Inhalt des Zurück-Steuerelements.
`nextLabel`	`Child`	`'›'`	Inhalt des Weiter-Steuerelements.