Пагинация

href — это функция из номера страницы в URL, поэтому пагинация одинаково работает и для /blog/2, и для /blog?page=2. Так каждая страница становится настоящей ссылкой: её обходят поисковики, её можно открыть в новой вкладке, и она работает без JavaScript — как раз то, что нужно статическому сайту.

Простая пагинация

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

Окно

Первая и последняя страницы показываются всегда, плюс окно вокруг текущей, а там, где последовательность прыгает, появляется многоточие.

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

Соседи

siblings — сколько страниц стоит по каждую сторону от текущей.

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

Края

На первой странице отключено «назад», на последней — «вперёд», так что элемент никогда не предлагает несуществующую страницу.

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

Цвета и подписи

stack({ gap: 'md' },
  pagination({ page: 3, count: 6, color: 'neutral', href: (page) => '#j-' + page }),
  pagination({
    page: 3,
    count: 6,
    color: 'success',
    previousLabel: 'Новее',
    nextLabel: 'Старее',
    href: (page) => '#k-' + page,
  }),
)

Без href

Без href номера рисуются кнопками с атрибутом data-su-page — для страницы, которая фильтрует на месте собственным скриптом. Когда есть возможность, выбирайте ссылки: они переживают выключенный JavaScript.

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

В блоге

Обычная форма для статического сайта: generateStaticParams порождает по странице на срез, а href на них указывает.

Показаны 21–30 из 47

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

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

Пропсы

Проп	Тип	По умолчанию	Описание
`page`	`number`	`1`	Текущая страница. Зажимается в допустимый диапазон.
`count`	`number`	`1`	Сколько всего страниц.
`href`	`(page: number) => string`	—	Из номера страницы в URL. Без него страницы рисуются кнопками.
`siblings`	`number`	`1`	Сколько страниц показывать по обе стороны от текущей.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Цвет текущей страницы.
`label`	`string`	`'Pagination'`	Доступное имя ориентира nav.
`previousLabel`	`Child`	`'‹'`	Содержимое кнопки «назад».
`nextLabel`	`Child`	`'›'`	Содержимое кнопки «вперёд».