НачалоОсновыКомпонентыТексты
Обзор
Кнопка Кнопка-иконка Кнопка с меню Группа кнопок Кнопка-переключатель Группа переключателей
Бейдж Баннер Пустое состояние Индикатор прогресса Кольцо прогресса Сообщение в разделе Скелетон Индикатор загрузки Уведомление
Field Поле ввода Textarea Number input Number stepper Search field OTP input Поле телефона Чекбокс Радиогруппа Переключатель Слайдер Карточка выбора Редактирование на месте
Select family Select Combobox Multiselect Country select Выбор даты Выбор периода Выбор времени Календарь Выбор эмодзи
Диалог Шторка Поповер Меню Подсказка
Боковая панель Навигационное меню Вкладки Сегментированный переключатель Хлебные крошки Пагинация Дерево
Таблица Таблица данных Аватар Группа аватаров Тег Иконка Изображение
Текст Prose Ссылка Блок кода Kbd
Аккордеон Раскрывающийся блок Разделитель Область прокрутки Разделитель панелей Соотношение сторон
Заголовок страницы

Пагинация

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

Стабильный Figma
ОбзорИспользованиеAPIДоступность
1 3 4 5 20 
<tk-pagination label="Search results">
  <tk-pagination-prev href="?page=3"></tk-pagination-prev>
  <tk-pagination-item href="?page=1">1</tk-pagination-item>
  <tk-pagination-ellipsis></tk-pagination-ellipsis>
  <tk-pagination-item href="?page=3">3</tk-pagination-item>
  <tk-pagination-item href="?page=4" current>4</tk-pagination-item>
  <tk-pagination-item href="?page=5">5</tk-pagination-item>
  <tk-pagination-ellipsis></tk-pagination-ellipsis>
  <tk-pagination-item href="?page=20">20</tk-pagination-item>
  <tk-pagination-next href="?page=5"></tk-pagination-next>
</tk-pagination>

Анатомия

Часть Что это
tk-pagination навигационный ориентир со списком частей ниже
tk-pagination-item номер страницы: ссылка или кнопка; current отмечает открытую
tk-pagination-prev / tk-pagination-next шеврон на предыдущую или следующую страницу
tk-pagination-ellipsis «…» на месте пропущенных страниц; не нажимается

Каждая часть — одна ячейка, по умолчанию 40px. Страницы и prev/next — по одной остановке Tab.

Страницы

Каждая страница и каждый из prev/next — ссылка или кнопка:

  • С href это ссылка. Подходит, когда у каждой страницы свой URL.
  • Без href это кнопка, которая отправляет tk-page-select. Подходит, когда страница меняется на месте, например строки в таблице.
1 2 3 
<tk-pagination label="Table rows">
  <tk-pagination-prev value="1"></tk-pagination-prev>
  <tk-pagination-item value="1">1</tk-pagination-item>
  <tk-pagination-item value="2" current>2</tk-pagination-item>
  <tk-pagination-item value="3">3</tk-pagination-item>
  <tk-pagination-next value="3"></tk-pagination-next>
</tk-pagination>
pagination.addEventListener('tk-page-select', (e) => showPage(e.detail.value));

current отмечает страницу, которая на экране. Она остаётся нажимаемой, не отключайте её.

Назад и вперёд

Prev и next показывают шеврон и называются «Previous page» и «Next page». На первой странице задайте disabled у prev, на последней — у next.

Previous 2 3 Next 
<tk-pagination label="Search results">
  <tk-pagination-prev href="?page=2">Previous</tk-pagination-prev>
  <tk-pagination-item href="?page=2">2</tk-pagination-item>
  <tk-pagination-item href="?page=3" current>3</tk-pagination-item>
  <tk-pagination-next disabled>Next</tk-pagination-next>
</tk-pagination>

Текст внутри prev или next стоит рядом с шевроном. Доступное имя остаётся «Previous page» или «Next page», поэтому видимое слово должно в него входить.

Какие страницы показать

Компонент сам не решает, какие номера и многоточия показывать. Обычно показывают первую страницу, последнюю и текущую с одной соседней с каждой стороны, а на месте каждого пропуска ставят многоточие:

function pageWindow(current, total, siblings = 1) {
  const range = (s, e) => Array.from({ length: e - s + 1 }, (_, i) => s + i);
  if (total <= siblings * 2 + 5) return range(1, total);
  const left = Math.max(current - siblings, 2);
  const right = Math.min(current + siblings, total - 1);
  return [
    1,
    ...(left > 2 ? ['…'] : []),
    ...range(left, right),
    ...(right < total - 1 ? ['…'] : []),
    total,
  ]; // pageWindow(4, 20) → [1, '…', 3, 4, 5, '…', 20]
}

Каждое число выводите как tk-pagination-item, с current у открытой страницы, а каждое '…' как tk-pagination-ellipsis.

Размеры

Размер один. Чтобы ряд стал компактнее, задайте --tk-pagination-cell-size у tk-pagination, но не меньше 24px.

1 2 
<tk-pagination label="Comments" style="--tk-pagination-cell-size: 32px">
  <tk-pagination-prev disabled></tk-pagination-prev>
  <tk-pagination-item value="1" current>1</tk-pagination-item>
  <tk-pagination-item value="2">2</tk-pagination-item>
  <tk-pagination-next value="2"></tk-pagination-next>
</tk-pagination>

Ячейка квадратная и расширяется под длинные номера. Цифры моноширинные, поэтому стоят ровно. Если места не хватает, ряд переносится.