Pagination

Pagination показывает текущую страницу одной связкой номеров, общее число страниц и прыжки к началу и концу выдачи без disabled-кнопок на краях.

Статус: experimental · в системе с 2026-07 · интерактивность: always (всегда)

Когда использовать

Большой упорядоченный набор делится на страницы предсказуемого размера.
Пользователю нужно вернуться к конкретной части выдачи или оценить её объём.

Не использовать:

Все элементы помещаются на одной странице.
Лента догружается непрерывно и номера страниц не имеют смысла.
Нужно показать этапы процесса — это Steps, а не Pagination.

Обычная выдача

Связка номеров, общее число страниц и прыжки к краям.

<!--
  🟢

  Базовый пример Pagination делит выдачу на десять элементов на страницу.
  Компонент сам хранит выбранный номер через bindable page.
-->

<script>
import Pagination from "$lib/ui/Pagination.svelte";
</script>

<Pagination count={96} perPage={10} />

Длинная выдача

Пропущенные диапазоны заменяются ellipsis.

<!--
  🟢

  Длинная выдача показывает сокращённые диапазоны вокруг текущей страницы.
  Ellipsis заменяет скрытые номера, не создавая отдельного действия.
-->

<script>
import Pagination from "$lib/ui/Pagination.svelte";
</script>

<Pagination count={640} perPage={10} page={32} />

Число на странице

Селект perPageOptions справа меняет деление выдачи и возвращает на первую страницу.

<!--
  🟢

  Селект «на странице» у правого края: варианты 10/30/50/100, как в эталоне
  select-perpage; выбор меняет деление выдачи и возвращает на первую страницу.
-->

<script>
import Pagination from "$lib/ui/Pagination.svelte";

let page = $state(3);
let perPage = $state(10);
</script>

<div style="width: 560px;">
	<Pagination count={240} bind:page bind:perPage perPageOptions={[10, 30, 50, 100]} />
</div>