Pagination

Быстрый старт​

Свойство slots задаёт максимальное количество кнопок страниц, которые отображаются одновременно. Свойство count задаёт общее количество элементов (или страниц, если hasPerPage не указан):

Live Editor
Result
Open in CodeSandbox

Управление внешним видом​

Внешний вид компонента зависит от свойств view и size:

Вид кнопок пагинации задается с помощью свойства view:

  • "default" — основная;
  • "secondary" — вторичная;
  • "clear" — чистая.
Live Editor
Result
Open in CodeSandbox

Вид активной страницы​

С помощью свойства viewCurrentPage можно задать отдельный вид для кнопки текущей активной страницы:

Live Editor
Result
Open in CodeSandbox

Тип​

С помощью свойства type можно выбрать тип отображения компонента:

  • "default" — обычный, с отображением номеров страниц;
  • "compact" — компактный, показывает только текущую страницу.
Live Editor
Result
Open in CodeSandbox

Форма кнопок​

С помощью свойства pilled можно переключить кнопки в круглую форму:

Live Editor
Result
Open in CodeSandbox

Количество элементов на странице​

С помощью свойства hasPerPage можно включить выпадающий список выбора количества элементов на странице. Начальное значение задаётся свойством perPage:

Live Editor
Result
Open in CodeSandbox

Быстрый переход на страницу​

С помощью свойства hasQuickJump можно включить поле быстрого перехода на произвольную страницу:

Live Editor
Result
Open in CodeSandbox

Вспомогательный текст​

С помощью свойства helperText можно добавить произвольный текст рядом с пагинацией. Свойство singleLine ограничивает текст одной строкой с многоточием:

Live Editor
Result
Open in CodeSandbox

Навигационные кнопки​

С помощью свойств leftContent и rightContent можно разместить произвольный контент по бокам от блока страниц. Например, кнопки навигации к первой, предыдущей, следующей и последней страницам:

Live Editor
Result
Open in CodeSandbox

Контролируемый режим​

Компонент поддерживает контролируемый режим через свойства value и perPage. Колбэк onChange вызывается с новым номером страницы и текущим количеством элементов на странице:

Live Editor
Result
Open in CodeSandbox

Таблица свойств​