ДокументацияРазделы, компоненты, системы и их подразделы
Пагинация
Навигация по страницам данных
Data navigation
Пагинация делит большой набор на предсказуемые страницы
Показывайте текущий диапазон, общее количество результатов и устойчивые переходы назад и вперёд. Фильтры и сортировка должны сохраняться при смене страницы.
Диапазон и номера страниц
Summary отвечает на вопрос «где я нахожусь», а список ссылок даёт быстрый переход к соседним и конкретным страницам.
HTMLНумерация страниц
<nav class="ox-pagination" aria-label="Страницы участников">
<span class="ox-pagination-summary">Показано 21–40 из 126</span>
<ul class="ox-pagination-list">
<li class="ox-pagination-item">
<a class="ox-pagination-link" href="?page=1" rel="prev">← Назад</a>
</li>
<li class="ox-pagination-item">
<span class="ox-pagination-current" aria-current="page">2</span>
</li>
<li class="ox-pagination-item">
<a class="ox-pagination-link" href="?page=3" rel="next">Вперёд →</a>
</li>
</ul>
</nav>Текущая, пропущенная и недоступная страницы
Состояние должно быть понятно без цвета и корректно отражаться в семантике.
.ox-pagination-linkДоступный переход на другую страницу..ox-pagination-currentТекущая страница без ссылки.aria-current="page"Сообщает активную страницу ассистивной технологии..ox-pagination-ellipsisПропущенный диапазон; декоративное многоточие получает aria-hidden..is-disabledСостояние контейнера недоступного перехода.aria-disabled="true"Для недоступного элемента без действующей ссылки.
Данные и URL контролирует приложение
Pagination не загружает данные самостоятельно. Сервер или клиентский модуль строит ссылки, сохраняет фильтры и обновляет список.
?page=3Текущая страница остаётся доступной по URL и после перезагрузки.?per_page=20Выбор размера страницы также сохраняйте в запросе.Фильтры и sortПереносите в каждую ссылку, обычно сбрасывая page до 1 после изменения.LoadingПри клиентской загрузке сохраняйте размер области и объявляйте обновление результатов.Пустой результатСкрывайте навигацию, если страниц больше нет.Одна страницаОбычно Pagination не нужна.
Навигация остаётся обычными ссылками
Пользователь может открыть страницу в новой вкладке, скопировать URL и вернуться назад средствами браузера.
nav aria-labelОтличает пагинацию от других навигационных областей.rel="prev" · rel="next"Обозначает соседние страницы последовательности.aria-label="Страница 3"Добавляет смысл ссылке, состоящей только из числа.Не buttonДля перехода по URL используйте ссылку, а не кнопку.После загрузкиПри SPA-переходе переносите фокус к заголовку результатов или объявляйте обновление.Не только стрелкаНа ключевых переходах оставляйте понятные подписи «Назад» и «Вперёд».