Paginasi

href adalah fungsi dari nomor halaman ke URL, jadi paginasi bekerja untuk /blog/2 maupun /blog?page=2. Itu menjadikan tiap halaman tautan sungguhan — bisa dirayapi, bisa dibuka di tab baru, dan bekerja tanpa JavaScript, dan itulah yang diinginkan situs statis.

Paginasi dasar

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

Penjendelaan

Halaman pertama dan terakhir selalu ditampilkan, plus sebuah jendela di sekitar halaman saat ini, dengan elipsis di mana pun urutannya melompat.

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

Saudara

siblings adalah berapa banyak halaman yang duduk di kedua sisi halaman saat ini.

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

Ujung

Sebelumnya dinonaktifkan di halaman pertama dan berikutnya di halaman terakhir, jadi kendalinya tidak pernah menawarkan halaman yang tidak ada.

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

Warna dan label

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

Tanpa href

Tanpa href, angkanya dirender sebagai tombol yang membawa data-su-page — untuk halaman yang menyaring di tempat dengan skripnya sendiri. Pilih tautan bila bisa: mereka bertahan ketika JavaScript dimatikan.

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

Di dalam blog

Bentuk yang lazim di situs statis: generateStaticParams menghasilkan satu halaman per potongan, dan href menunjuk ke sana.

Menampilkan 21–30 dari 47

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

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

Props

Prop	Tipe	Bawaan	Deskripsi
`page`	`number`	`1`	Halaman saat ini. Dibatasi ke dalam rentangnya.
`count`	`number`	`1`	Berapa banyak halaman yang ada.
`href`	`(page: number) => string`	—	Nomor halaman ke URL. Tanpa itu, halamannya dirender sebagai tombol.
`siblings`	`number`	`1`	Halaman yang ditampilkan di kedua sisi halaman saat ini.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Warna halaman saat ini.
`label`	`string`	`'Pagination'`	Nama yang dapat diakses untuk markah nav-nya.
`previousLabel`	`Child`	`'‹'`	Isi kendali sebelumnya.
`nextLabel`	`Child`	`'›'`	Isi kendali berikutnya.