Pagination

Pagination — переключатель страниц длинного списка: стрелка назад, номера страниц и стрелка вперёд.

Компонент цельный, а не составной: разметку ряда он собирает сам, снаружи приходят только размер списка (count) и размер страницы (pageSize). Сколько всего страниц, какие номера показать и где поставить многоточие — считает Ark Pagination; крайние стрелки на первой и последней странице гаснут сами.

Состояние ведётся контролируемо (пара page / onPageChange) или неконтролируемо (defaultPage) — во втором случае снаружи о текущей странице знать не нужно вовсе.

Клавиатура и доступность — на стороне Ark: элементы ряда — обычные кнопки в табуляции, текущая помечена aria-current="page", подписи для скринридера русские.

Пара page / onPageChange отдаёт текущую страницу наружу — по ней запрашивают срез данных с бэка и её же кладут в адрес страницы. Колбэк получает { page, pageSize }.

Если снаружи страница не нужна, хватит defaultPage — пагинация ведёт её сама.

Сколько номеров помещается в ряд, задают два пропа: siblingCount — страницы по обе стороны от текущей, boundaryCount — страницы по краям списка. Всё, что не влезло между ними, схлопывается в многоточие.

siblingCount={0} даёт самый узкий ряд — для боковых панелей и мобильной ширины.

Смысловой вариант — задаёт цвет текущей страницы и наведения: primary — акцент (по умолчанию), secondary — второстепенный, success / warning / danger — семантические статусы, default — нейтральный.

Внешний вид кнопок ряда: solid — сплошная заливка, outline — обводка без заливки, dashed — та же обводка пунктиром, ghost — прозрачные кнопки с приглушённой подложкой (по умолчанию). Текущая страница подсвечена насыщеннее наведённой при любой подаче.

Размер управляет высотой кнопок, кеглем номеров и размером стрелок. Ступень ставится на ряд целиком и наследуется всеми его элементами. xs — для плотных панелей, sm — базовый, md и выше — для списков на всю страницу.

Скругление углов кнопок — от прямых none до circle (круглые кнопки). На прозрачных кнопках разница видна только у текущей страницы, поэтому проп имеет смысл вместе с solid, outline или dashed.

color — цвет вне стандартного набора вариантов, принимает любое CSS-значение и перекрывает цвет из variant. Цвет текста при сплошной заливке подбирается автоматически: на светлом фоне — чёрный, на тёмном — белый.